Saltar al contenido

Deshabilitar/desactivar las transiciones CSS3 heredadas

Haz todo lo posible por entender el código correctamente antes de usarlo a tu trabajo y si tdeseas aportar algo puedes dejarlo en los comentarios.

Solución:

El uso de transition: none parece ser compatible (con un ajuste específico para Opera) dado el siguiente HTML:

Content
Content
Content
Content

…y CSS:

a 
    color: #f90;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 

a:hover 
    color: #f00;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 

a.noTransition 
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;

Demostración de violín JS.

Probado con Chromium 12, Opera 11.x y Firefox 5 en Ubuntu 11.04.

La adaptación específica a Opera es el uso de -o-transition: color 0 ease-in; que se dirige a la misma propiedad que se especifica en el otro transition reglas, pero establece el tiempo de transición a 0, lo que evita que la transición sea perceptible. el uso de la a.noTransition selector es simplemente proporcionar un selector específico para los elementos sin transiciones.


editado para notar que la respuesta de @Frédéric Hamidi, usando all (para Opera, al menos) es mucho más conciso que enumerar cada nombre de propiedad individual que no desea que tenga transición.

Demostración de JS Fiddle actualizada, que muestra el uso de all en Ópera: -o-transition: all 0 nonetras la autoeliminación de la respuesta de @Frédéric.

Si desea deshabilitar una sola propiedad de transición, puede hacerlo:

transition: color 0s;

(ya que una transición de cero segundos es lo mismo que ninguna transición).

Otra forma de eliminar todas las transiciones es con el unset palabra clave:

a.tags 
    transition: unset;

En el caso de transition, unset es equivalente a initialya que transition no es una propiedad heredada:

a.tags 
    transition: initial;

Un lector que sabe de unset y initial puede decir que estas soluciones son correctas inmediatamente, sin tener que pensar en la sintaxis específica de transition.

valoraciones y comentarios

Recuerda algo, que te damos el privilegio decir si encontraste tu interrogante a tiempo.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *