examples - Establecer una transición CSS3 a ninguno

transition css hover

Question

¿Cómo lo haría para que una transición CSS no funcione dentro de una consulta de medios, o en cualquier otro caso? Por ejemplo:

@media (min-width: 200px) {
    element {
        transition: width 1s;
    }   
}

@media (min-width: 600px) {
    element {
        transition: none; // SET TO NO TRANSITION
    }   
}

Answer 1

Incluso mejor que establecer la propiedad de transición en none es establecer la duración de la transición en 0s .

Este es el código de navegador cruzado:

-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;

¿Por qué es esto mejor? Porque, de forma predeterminada, los navegadores que cumplen con los estándares (como Firefox) establecen propiedades de transición para cada elemento. También establecen la duración de la transición a 0s . Por lo tanto, al establecer la duración de la transición en 0 s , usted está más cerca de cómo el navegador define un elemento sin una transición.

Al establecer la duración de la transición en los 0s predeterminados, la propiedad de transición es irrelevante.

Answer 2

Puede establecer la propiedad de transición en ninguno . De esta manera, no se aplicará ningún efecto de transición.

Me gusta esto:

-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;

Answer 3

transition: width 0s

Debería hacer el truco, ya que básicamente dice que hay una transición, ¡pero 0s es demasiado rápido para verlo!