javascript - transicion - transition css hover

Las transiciones CSS no funcionan cuando se asignan a través de JavaScript

Question

Tengo un gran dolor de cabeza al intentar aplicar las transiciones CSS3 a una presentación de diapositivas a través de JavaScript.

Básicamente, el JavaScript obtiene todas las diapositivas de la presentación de diapositivas y aplica las clases de CSS a los elementos correctos para dar un bonito efecto animado, si no hay soporte para las transiciones de CSS3, solo aplicará los estilos sin una transición.

Ahora, mi ''pequeño'' problema. Todo funciona como se esperaba, todas las diapositivas obtienen los estilos correctos, el código se ejecuta sin errores (hasta ahora). Pero las transiciones especificadas no funcionan, aunque se aplicaron los estilos correctos. Además, los estilos y las transiciones funcionan cuando los aplico yo mismo a través del inspector.

Como no pude encontrar una explicación lógica, pensé que alguien aquí podría responderla, ¿por favor?

He reunido un pequeño ejemplo de lo que es el código en este momento: http://g2f.nl/38rvma O use JSfiddle (sin imágenes): http://jsfiddle.net/5RgGV/1/

Answer 1

Algunas personas han preguntado por qué hay un retraso. El estándar quiere permitir que varias transiciones, conocidas como eventos de cambio de estilo, ocurran a la vez (como un elemento que se desvanece al mismo tiempo que gira para ver). Desafortunadamente, no define una forma explícita de agrupar qué transiciones desea que ocurran al mismo tiempo. En su lugar, permite que los navegadores elijan de forma arbitraria qué transiciones ocurren al mismo tiempo por la distancia entre ellas. La mayoría de los navegadores parecen usar su frecuencia de actualización para definir este tiempo.

Aquí está el estándar si desea más detalles: http://dev.w3.org/csswg/css-transitions/#starting

Answer 2

Truco el motor de diseño!

function finalizeAndCleanUp (event) {
    if (event.propertyName == ''opacity'') {
        this.style.opacity = ''0''
        this.removeEventListener(''transitionend'', finalizeAndCleanUp)
    }
}
element.style.transition = ''opacity 1s''
element.style.opacity = ''0''
element.addEventListener(''transitionend'', finalizeAndCleanUp)
// next line''s important but there''s no need to store the value
element.offsetHeight
element.style.opacity = ''1''

Como ya se mencionó, la transition s funciona mediante la interpolación del estado A al estado B. Si su script realiza cambios en la misma función, el motor de diseño no puede separar dónde finaliza el estado A y comienza B. A menos que le des una pista.

Como no hay una forma oficial de hacer la sugerencia, debe confiar en los efectos secundarios de algunas funciones. En este caso .offsetHeight getter que implícitamente hace que el motor de diseño detenga, evalúe y calcule todas las propiedades que se establecen y devuelve un valor. Por lo general, esto debe evitarse por implicaciones en el rendimiento, pero en nuestro caso esto es exactamente lo que se necesita: la consolidación del estado.

Código de limpieza agregado para completar.

Answer 3

Aquí hay un ejemplo (JSFiddle) de una transición de desvanecimiento trabajando en un disparador de Javascript.

Answer 4

Para que la transition funcione, tres cosas tienen que suceder.

1. el elemento debe tener la propiedad explícitamente definida, en este caso: opacity: 0;
2. el elemento debe tener la transición definida: transition: opacity 2s;
3. la nueva propiedad debe ser configurada: opacity: 1

Si está asignando 1 y 2 dinámicamente, como en su ejemplo, debe haber un retraso antes de 3 para que el navegador pueda procesar la solicitud. La razón por la que funciona cuando lo está depurando es porque está creando este retraso al atravesarlo, lo que le da tiempo al procesador para procesarlo. Dar un retraso a la asignación de .target-fadein :

window.setTimeout( function() { slides[targetIndex].className += " target-fadein"; }, 100 ); 

O ponga .target-fadein-begin en su HTML directamente para que se analice en carga y esté listo para la transición.

Agregar la transition a un elemento no es lo que activa la animación, ya que cambiar la propiedad lo hace.

Demostración: http://jsfiddle.net/ThinkingStiff/QNnnQ/

HTML:

<div id="fade1" class="fadeable">fade 1 - works</div>
<div id="fade2">fade 2 - doesn''t work</div>
<div id="fade3">fade 3 - works</div>

CSS:

.fadeable {
    opacity: 0;
}

.fade-in {
    opacity: 1;
    transition:             opacity 2s;
        -moz-transition:    opacity 2s;
        -ms-transition:     opacity 2s;
        -o-transition:      opacity 2s;
        -webkit-transition: opacity 2s;
}

Guión:

//works
document.getElementById( ''fade1'' ).className += '' fade-in'';

//doesn''t work
document.getElementById( ''fade2'' ).className = ''fadeable'';
document.getElementById( ''fade2'' ).className += '' fade-in'';

//works
document.getElementById( ''fade3'' ).className = ''fadeable'';
window.setTimeout( function() {

    document.getElementById( ''fade3'' ).className += '' fade-in'';

}, 100);