jquery - data - Transición de CSS sin disparar
tooltip javascript (6)
Estoy creando un elemento DOM (un div), agregándolo al DOM, y luego cambiando su ancho, todo en un solo clic en javascript. Esto, en teoría, debería desencadenar una transición de CSS3, pero el resultado es directo de A a B, sin la transición intermedia.
Si hago que el ancho cambie a través de un evento de clic de prueba por separado, todo funciona como se espera.
Aquí está mi JS y CSS:
JS (jQuery):
var div = $(''<div />'').addClass(''trans'').css(''width'', ''20px'');
$(''#container'').append(div);
div.css(''width'', ''200px'');
CSS (solo mozilla por el momento):
.trans {
-moz-transition-property: all;
-moz-transition-duration: 5s;
height: 20px;
background-color: cyan;
}
¿Estoy jugando aquí, o es el "todo en un golpe rápido" no de la manera en que deberían hacerse las cosas?
Toda la ayuda es realmente apreciada.
aquí hay dos formas de hacer esto.
1 - Transiciones de CSS
utilizando setTimeout el método addClass se ejecutará después en lugar de junto con el script precedente para que el evento de transition se active
jQuery:
var div = $(''<div class="trans" />'');
$(''#container'').append(div);
// set the class change to run 1ms after adding the div
setTimeout(function() {div.addClass(''wide'')}, 1);
CSS:
.trans {
width: 20px;
height: 20px;
background-color: cyan;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-ie-transition: all 5s ease;
-o-transition: all 5s ease;
transition: all 5s ease;
}
.wide {
width: 200px;
}
2 - .animate() jQuery
jQuery:
var div = $(''<div class="trans" />'');
$(''#container'').append(div);
div.animate({''width'': ''200px''}, 5000); // 5 sec animation
CSS:
.trans {
width: 20px;
height: 20px;
background-color: cyan;
}
Un enfoque más limpio que no se basa en setTimeout, es leer la propiedad css en cuestión antes de configurarlo:
var div = $(''<div />'').addClass(''trans'');
$(''#container'').append(div);
div.css(''width'');//add this line
div.css(''width'', ''200px'');
Trabajando aquí:
http://jsfiddle.net/FYPpt/144/
Como se explica en los comentarios a continuación de Lucero, hacerlo de esta manera es necesario para obligar al navegador a calcular un valor real en lugar de "automático", "heredar" o similar. Sin un valor real, el navegador no sabrá que el nuevo valor es un cambio con respecto al anterior.
Intenta llamar al método .offset() jQuery.
Cuando el navegador obtiene el desplazamiento, desencadena un evento de reflujo / repintado / diseño que permite que las transiciones funcionen.
Vea este violín: http://jsfiddle.net/FYPpt/199/
Ver también - http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
como @onetrickpony preguntaba, ¿qué pasa si todas las reglas están en el archivo CSS y no deberían agregarse en la función JS?
Según la respuesta de Torin Finnemann, solo con un ligero cambio:
Agregue una clase extra donde se definen las reglas: new-rules
var div = $(''<div class="trans" />'');
$(''#container'').append(div);
var div = $(''<div />'').addClass(''trans'');
$(''#container'').append(div);
div.height();
div.addClass(''new-rules'');
en tu CSS tienes la clase predefinida:
.trans.new-rules {
width: 200px;
background: yellow;
}
ahora no hay necesidad de hormigueo con el JS al cambiar el CSS. Cámbielo en el archivo CSS en new-rules :)
En respuesta a la recompensa:
Si no puede darse el lujo de saber qué propiedad se está transfiriendo o simplemente no cree que sea una buena práctica forzar un setTimeout para que se setTimeout una animación, puede forzar un reflujo de otra manera.
La razón por la que setTimeout funciona en primer lugar se debe al hecho de que está causando un reflujo completo del documento mientras tanto, incluso si la duración se establece en 0 . Esa no es la única forma de causar un reflujo.
Enlace a un violín
JavaScript
for (x = Math.ceil(Math.random() * 10), i=0;i<x;i++){
$(''<div />'').appendTo($(''#container'')).addClass(''trans'');
}
var divs = $(''#container div'');
var x = divs.eq(Math.ceil(Math.random() * divs.length));
x[0].offsetHeight;
x.addClass(''wide'');
Con este JavaScript estamos agregando aleatoriamente entre 1 y 10 elementos div , y luego seleccionamos uno al azar y agregamos la clase wide .
Notarás una línea impar de JavaScript, a saber, x[0].offsetHeight . Este es el eje de toda la operación. Llamar a offsetHeight activa el documento para que se reajuste sin usar un setTimeout ni consultar el valor de CSS.
Qué reflujo está relacionado con el DOM:
Un reflujo calcula el diseño de la página. Un reflujo en un elemento vuelve a calcular las dimensiones y la posición del elemento, y también desencadena nuevos reflujos en los elementos, ancestros y elementos de ese elemento que aparecen después del DOM. Luego llama a una pintura final. La reposición es muy costosa, pero lamentablemente se puede desencadenar fácilmente.
Por lo tanto, sean prudentes en la forma de usar estas funciones. No es demasiado preocupante para la mayoría de los navegadores modernos (ya que jQuery es conocido por disparar varios reflujos), pero aún hay algo que considerar antes de agregar algo como esta solución en todo su sitio web.
Nota importante: esto no es más o menos eficiente que una llamada a setTimeout . Esta no es una solución mágica, y está haciendo lo mismo debajo del capó.
Aquí está el CSS correspondiente, para referencia:
.trans {
width: 20px;
height: 20px;
background-color: cyan;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
transition: all 5s ease;
}
.trans.wide {
width: 200px;
}
var div = $(''<div />'');
$(''#container'').append(div);
div.css(''width'', ''20px'').addClass(''trans'', function() {
div.css(''width'', ''200px'')
});
Crea un nuevo elemento DIV y agrega la clase ''trans'' a ese elemento para disparar la transición CSS