jquery - modal - polyfill html date
Polietileno de relleno de animación CSS3 (3)
Prefacio
Supongamos que un div está animado por opacity:0; a la opacity:1; y quiero mantener la opacity:1; después de que termine la animación
Eso es lo que animation-fill-mode:forwards; hace.
@keyframes myAnimation {
from { opacity:0; }
to { opacity:1; }
}
div {
opacity:0;
animation-name:myAnimation;
animation-delay:1s;
animation-duration:2s;
animation-fill-mode:forwards;
}
<div>just a test</div>
- Nota 1: no incluí los prefijos del vendedor aquí para simplificar
- Nota 2: eso es solo un ejemplo, por favor no responda con "solo use la función jQuery fadeIn", etc.
Algunas cosas para saber
En esta respuesta, leí que el modo animation-fill-mode es compatible con Chrome 16+, Safari 4+, Firefox 5+.
Pero la animation solo es compatible con Chrome 1+ y Opera también. Por lo tanto, una prueba general con Modernizr puede ser positiva incluso si no se admite el fill-mode .
Para apuntar a animation-fill-mode agregué una nueva prueba en Modernizr:
Modernizr.addTest(''animation-fill-mode'',function(){
return Modernizr.testAllProps(''animationFillMode'');
});
Ahora tengo una clase .no-animation-fill-mode para CSS y Modernizr.animationFillMode para JavaScript.
También leo de las especificaciones de animaciones de CSS3 que:
una animación especificada en la hoja de estilo del documento comenzará en la carga del documento
Finalmente, la (s) pregunta (s)
¿Está bien ejecutar una función jQuery simple en el número exacto de segundos que termina la animación?
$(document).ready(function(){
if(!Modernizr.animation){
$(''div'').delay(1000).fadeIn(2000);
}else if(!Modernizr.animationFillMode){
$(''div'').delay(3000).show();
}
});
Y en CSS:
.no-animation-fill-mode div {
animation-iteration-count:1;
}
/* or just animation:myAnimation 2s 1s 1; for everyone */
¿O hay algún polyfill conocido específico para animation-fill-mode ?
Además, ¿qué sucede si uso la sintaxis abreviada?
animation:myAnimation 2s 1s forwards;
en navegadores que admiten animation pero no en modo animation-fill-mode ?
¡Muchas gracias!
Si fuera yo, trataría de optar por la alternativa más simple, si es posible. Me gustaría degradar mi implementación para que solo use lo que comúnmente se acepta. Más adelante, cuando la función sea más ampliamente compatible, entonces pienso en implementarla. Raramente considero usar una función que tiene This is an experimental technology transmitida en las páginas de documentación, pero entonces tal vez debería ser clasificado como aburrido :)
En su ejemplo, puede obtener el mismo resultado que animation-fill-mode:forwards definiendo inicialmente el estado final de su elemento y utilizando una animación encadenada (si es necesario un retraso antes de la acción) :
@keyframes waitandhide {
from { opacity:0; }
to { opacity:0; }
}
@keyframes show {
from { opacity:0; }
to { opacity:1; }
}
div {
opacity:1;
animation: waitandhide 2s 0s, show 2s 2s;
}
<div>just a test</div>
Ahora es posible que los navegadores más lentos puedan actualizar sus estados de elementos iniciales antes de volverlos a ocultar. Pero en mi experiencia, solo he visto esto en máquinas muy antiguas y en páginas que tienen una gran cantidad de CSS para renderizar.
Obviamente, lo anterior hincha tu css un poco más (ya que tienes que duplicar estilos) , y sería más complicado cuando se trata de animaciones complejas. Sin embargo:
- Debería funcionar para casi cualquier situación de animación.
- Evitaría la necesidad de JavaScript (excepto el $ (). FadeIn fallback) .
- Funcionará en todos los navegadores compatibles con la animación CSS.
- No corre el riesgo de que JS y CSS estén sin sincronizarse.
Con respecto al uso de formas abreviadas, sería mejor no hacerlo si desea obtener la mayor compatibilidad posible con el navegador. Sin embargo, como se muestra en mis ejemplos anteriores, he optado por usar formularios cortos porque tienen más claridad y puedo entender que no quiero escribir (o leer) las versiones prolijas todo el tiempo. Por esta razón, recomendaría usar menos para generar su CSS:
No sé de ningún polyfill ... Pero diría que debería usar su propia prueba Modernizr personalizada, y para el navegador que no admite el modo de relleno de animación, debe usar el evento animationEnd para activar su devolución de llamada y establecer opacidad a 1 (o eliminar una clase).
Ver: eventos de transición CSS3
En cuanto a la notación abreviada, IE <10 no admite la propiedad animation-fill-mode y estoy bastante seguro de que rompería toda la declaración.
Para su información, así es como estoy implementando la respuesta de Pebbl (que es una respuesta muy inteligente) hoy en día. Solo necesito la detección de animaciones css de Modernizr .
Supongamos que quiero deslizar y desvanecer este div:
<div class="target">Some stuff</div>
en primer lugar, escribo la animación con prefijos de vendedor
@keyframes byebye {
0% { height:100px; opacity:1; }
100% { opacity:0; height:0; }
}
entonces una nueva clase
.target-animation {
height:0; opacity:0; // same as "100%" state
animation:byebye 750ms 1;
}
moviéndose a javascript:
// $(''.whatever'').on(''click'',function(){ ...
if(Modernizr.cssanimations)
// css animations are supported!
$(''.target'').addClass(''target-animation'');
else
// i hate you IE
$(''.target'').animate({height:0,opacity:0},750);
Manifestación
Si necesita activar la animación varias veces, simplemente elimine la clase con javascript como se explica aquí :
// if(Modernizr.cssanimations) ...
$(''target'').addClass(''target-animation'').on(''webkitAnimationEnd oAnimationEnd oanimationend animationend msAnimationEnd'',function(){
$(this).removeClass(''target-animation'')
// don''t forget to .hide() if needed
});
// ... else