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

Usando keyframes, es posible animar un elemento tan pronto como se inserta en el DOM. noCSS3 - Transición en la eliminación de DOM

@-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; 
}

es un poco de funcionalidad similar disponible para aplicar una animación (a través de CSS, sin JavaScript) a un elemento justo antes de que se retira del DOM: He aquí algunos ejemplos de CSS? 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/

Fuente

2011-08-09 Steve

Crear otra animación CSS llamada fadeOut, por ejemplo. Luego, cuando se desea eliminar el elemento, cambie la propiedad animation en el elemento a la nueva animación, y utilizar el evento animationend para desencadenar la eliminación real del elemento una vez que la animación se realiza:

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

See also my updated version of your jsFiddle. Eso funciona para mí en Safari, al menos.

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

No creo que jQuery tenga ningún soporte "real" para animaciones CSS todavía, así que no creo que pueda deshacerse de ese webkitAnimationEnd. En Firefox simplemente se llama animationend.

Estoy bastante seguro de que no hay forma de hacerlo en CSS.

Fuente

2011-08-09 18:54:13 mercator

Esto es bastante inteligente, pero si voy una ruta JavaScript yo sólo podría llamar '$ ('# fill '). fadeOut() '. Lo que realmente estoy buscando es una solución única de CSS: no sabía que desaparecer en un elemento era posible hasta que vi muchos foros, así que espero que alguien sepa cómo desvanecer un elemento también. – Steve

Pero '.fadeOut()' usa JavaScript para hacer la animación.Esto realmente usa CSS para la animación. Simplemente usa JavaScript para activarlo en el momento correcto. Y dado que está usando JavaScript de todos modos para insertar/eliminar realmente el elemento, "CSS only" es algo arbitrario. Simplemente no hay forma de activar algo en CSS para que ocurra justo antes de que se elimine. Si convertiste esos divs de "haz clic en mí" en enlaces, es posible que puedas usar '.hide: active + # fill' como selector para desencadenar el desvanecimiento, pero aún necesitarías un evento' animationend' para eliminar el elemento cuando se haya desvanecido. – mercator

@ S.K .: En resumen, no. CSS no está relacionado con la manipulación DOM como agregar y eliminar elementos. El truco de FadeIn funciona porque la animación ocurre cada vez que el elemento aparece por primera vez simplemente porque ese es el primer momento en que PUEDE suceder. Para que un elemento sepa FadeOut, necesitaría saber que está a punto de ser eliminado, y eso solo es posible con Javascript. Y como Mercator dijo, ya que usted está usando Javascript para eliminar el elemento, el requisito de "solo CSS" es arbitrario. – joequincy

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á usando un poco, considere lo siguiente para una solución que degrada graciosamente:

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

Luego, en el css puede definir su 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', debe ser capaz de comprobar la 'animación 'css property, y si existe, entonces sabes que puedes conectar' animationEnd 'y si no lo hace, entonces 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 para jQuery muy fresco que le permite utilizar las animaciones CSS3 para los elementos DOM que están siendo eliminados. No se requiere Javascript adicional: http://www.github.com/arthur5005/jquery.motionnotion

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

Fuente

2012-07-31 22:56:59

Muy interesante. Cuando agregas soporte para las otras funciones como 'append()' y 'prepend()', comenzaré a usarlo. ¿Cómo se compara con https://github.com/ai/transition-events? –

Hola, Steve, esto es principalmente para otras personas, he actualizado el complemento para admitir append() y prepend(). :) –

-4

idealmente para algo así como fadeIn y Fadeout usted debe utilizar transiciones css css .. animaciones no

Fuente

2012-10-17 10:31:48

la animación funciona en la inserción DOM, la transición no –

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

Respuesta

Cuestiones relacionadas