Tengo en mente algunos fade-ins, luego un fade-out y terminando en una nueva página siendo cargada (target = self). De algún googlear, parece que la animación css no prevé el último paso (buscar una nueva URL).
¿Hay una manera simple de hacer eso? La página de inicio se cargará jQuery. De alguna manera, la nueva URL tiene que esperar hasta que la animación termine.
Actualizar
Al final, utilicé este tutorial de animación css para hacer una animación de 5 segundos, inserta todos los css en el <head> y pegó las imágenes en la página en base64 (nomás solicitudes HTTP), verificó el tamaño del archivo resultante (11Kb), verificó Google Analytics para ver mis tiempos promedio de carga de página para archivos de ese tamaño (menos de 1 segundo) y luego se agregó a la página <META http-equiv="refresh" content="8; url=page2.html">. Se siente como algo de la década de 1990, pero funciona.
Respuestas
0 para la respuesta № 1Si el tiempo de animación es siempre el mismo, puede controlar el tiempo exacto de animación y cargar la página después de este tiempo.
1 para la respuesta № 2
Depende de si tu animación está basada en CSS o jQuery, una pregunta planteada por algunos otros también. Si está basado en CSS, puede escuchar a la animationend evento (con los prefijos de proveedores apropiados agregados para maximizar la compatibilidad entre navegadores):
$(ele).one("webkitAnimationEnd oanimationend msAnimationEnd animationend", function() {
// Load new URL
window.location.href = newURL;
});
Ver el violín de demostración aquí: http://jsfiddle.net/teddyrised/pqxsj8v9/
Si su animación es jQuery, es decir, utilizando el .animate() Método, simplemente use la función de devolución de llamada:
$(ele).animate({
// Animate stuff
}, duration, function() {
// Load new URL
window.location.href = newURL;
});
Ver el violín de demostración aquí: http://jsfiddle.net/teddyrised/ad0vtqyt/
0 para la respuesta № 3
cómo está activando la animación, mencionó jquery, así que si está utilizando jquery para la animación, siempre puede usar la devolución de llamada para cargar su página o establecer un tiempo de espera, etc.
$(".someElement".animate({}, timeFrame, function () {
// fire cod ein here or set a timeout for when the whole animation is done
setTimout(function () {
//code here
}, timeForAnimationToFinish):
});
Si está agregando clases y utilizando la transición css3, siempre podría hacer:
$("#someThing").addClass("animateMeFor30Seconds", function () {
var someThing = $(this);
setTimeout(function () {
//next animation
}, 30000);
});
No es el mejor, pero pasará sus pruebas de unidad y le permitirá refectorar :-)