speed - transition delay css

CSS3-Transición en la eliminación de DOM

Question

Con keyframes , es posible animar un elemento tan pronto como se inserta en el DOM. Aquí hay un ejemplo de CSS:

@-moz-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@-webkit-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

#box {
    -webkit-animation: fadeIn 500ms;
    -moz-animation: fadeIn 500ms;
    animation: fadeIn 500ms;
}

¿Hay alguna funcionalidad similar disponible para aplicar una animación (a través de CSS, sin JavaScript) a un elemento justo antes de que se elimine del DOM? Debajo hay un jsFiddle que hice para jugar con esta idea; no dude en bifurcarlo si conoce una solución.

jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/

Answer 1

Cree otra animación CSS llamada fadeOut , por ejemplo. Luego, cuando desee eliminar el elemento, cambie la propiedad de la animation en el elemento a esa nueva animación y use el evento animationend para activar la eliminación real del elemento una vez que la animación finalice:

$(''.hide'').click(function() {
    if (!$(this).hasClass(''disabled'')) {
        $(''#fill'').css(''-webkit-animation'', ''fadeOut 500ms'');
        $(''#fill'').bind(''webkitAnimationEnd'',function(){
            $(''#fill'').remove();
            $(''.show, .hide'').toggleClass(''disabled'');
        });
    }
});

Vea también mi versión actualizada de su jsFiddle. Eso funciona para mí en Safari, al menos.

Bueno, deberías estar usando una clase en lugar de .css() .

No creo que jQuery tenga un soporte "real" para las animaciones de CSS todavía, así que no creo que puedas deshacerte de ese webkitAnimationEnd . En Firefox simplemente se llama animationend .

Estoy bastante seguro de que no hay forma de hacer esto solo con CSS.

Answer 2

He estado trabajando en una biblioteca de componentes para javascript y me encontré con este problema yo mismo. Tengo la ventaja de poder lanzar un montón de javascript al problema, pero como ya estás usando un poco, considera lo siguiente para una solución degradante:

Al eliminar cualquier componente / nodo dom, agregue una clase llamada ''eliminación''.

Luego, en el CSS puedes definir tu animación usando esa clase:

.someElement.removing {
    -webkit-animation: fadeOut 500ms;
    -moz-animation: fadeOut 500ms;
    animation: fadeOut 500ms;
}

Y de vuelta en el javascript, justo después de agregar la clase ''eliminar'', debería poder verificar la propiedad ''animation'' css, y si existe, entonces sabrá que puede conectar ''animationEnd'' y si no lo hace ''t, luego simplemente elimina el elemento de inmediato. Recuerdo haber probado esto hace un tiempo, debería funcionar; Veré si puedo desenterrar el código de ejemplo.

Actualización: he desenterrado esta técnica y empecé a escribir un plugin muy bueno para jQuery que te permite usar animaciones CSS3 para elementos DOM que se están eliminando. No se requiere Javascript adicional: http://www.github.com/arthur5005/jquery.motionnotion

Es muy experimental, utilícelo bajo su propio riesgo, pero me encantaría recibir ayuda y comentarios. :)

Answer 3

idealmente para algo como fadeIN y fadeOUT deberías estar usando transiciones CSS, no CSS.