Transiciones CSS3: ¿Es " transition: all "más lento que"transition: x"?
Tengo una pregunta sobre la velocidad de renderizado de la propiedad de transición css3.
Supongamos que tengo un número de elementos:
div, span, a {transition: all}
div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}
div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}
Es mucho más eficiente apuntar a todas las transiciones para todos esos elementos usando una declaración div, span, a {transition: all}. Pero mi pregunta es: ¿sería "más rápido" en términos de la suavidad y rapidez de la representación de la animación dirigirse a la propiedad de transición específica de cada elemento? Por ejemplo:
div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}
div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}
Mi lógica al preguntar esto es que si el css " engine "tiene que buscar" todas " las propiedades de transición, incluso si hay una sola propiedad para un elemento, que podría ralentizar las cosas.
¿alguien sabe si ese es el caso? ¡Gracias!
2 answers
Sí, usar transition: all podría causar grandes inconvenientes en el rendimiento. Puede haber muchos casos en los que el navegador se vería si necesita hacer una transición, incluso si el usuario no lo verá, como los cambios de color, cambios de dimensión, etc.
El ejemplo más simple que se me ocurre es este: http://dabblet.com/gist/1657661 - intenta cambiar el nivel de zoom o el tamaño de la fuente y verás que todo se vuelve animado.Por supuesto, no podría haber muchas interacciones de usuario, pero hay podrían ser algunos cambios en la interfaz que pueden causar el reflujo y repintes en algunos bloques, que podrían decirle al navegador que intente y anime esos cambios.
Por lo tanto, en general, se recomienda que no use el transition: all y que use las transiciones directas en su lugar.
Hay algunas otras cosas que pueden salir mal con las transiciones all, como el chapoteo de la animación en la carga de la página, donde al principio renderizaría los estilos iniciales para bloques y luego aplicaría el estilo con un animación. En muchos casos no sería lo que quieres :)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-27 12:57:12
He estado usando all para casos en los que necesitaba animar más de una regla. Por ejemplo, si quisiera cambiar la color & background-color el :hover.
Pero resulta que puede apuntar a más de una regla para las transiciones, por lo que nunca necesita recurrir a la configuración all.
.nav a {
transition: color .2s, text-shadow .2s;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-20 08:32:23