Mam na myśli kilka wyciszeń, potem wyciszenie i zakończenie ładowania nowej strony (target = self). Z niektórych googlingów wygląda na to, że animacja css nie przewiduje ostatniego kroku (pobranie nowego adresu URL).
Czy jest na to prosty sposób? Strona początkowa będzie ładować jquery. Jakoś nowy adres URL musi poczekać, aż animacja się skończy.
Aktualizacja
W końcu użyłem ten samouczek animacji css aby utworzyć animację 5-sekundową, wstaw wszystkie css do pliku <head> i wkleił obrazy na stronie w base64 (nrkolejne żądania HTTP), sprawdziłem wynikowy rozmiar pliku (11 KB), sprawdziłem Google Analytics, aby zobaczyć mój średni czas ładowania strony dla plików o tym rozmiarze (mniej niż 1 sekunda), a następnie dodanych do strony <META http-equiv="refresh" content="8; url=page2.html">. Wygląda jak coś z lat 90., ale działa.
Odpowiedzi:
0 dla odpowiedzi № 1Jeśli czas animacji jest zawsze taki sam, możesz obsłużyć dokładny czas animacji i załadować stronę po tym czasie.
1 dla odpowiedzi nr 2
Zależy to od tego, czy twoja animacja jest obsługiwana przez CSS czy jQuery, pytanie również zadane przez kilka innych. Jeśli jest oparty na CSS, możesz słuchać animationend zdarzenie (z dodanymi odpowiednimi prefiksami dostawcy, aby zmaksymalizować kompatybilność z różnymi przeglądarkami):
$(ele).one("webkitAnimationEnd oanimationend msAnimationEnd animationend", function() {
// Load new URL
window.location.href = newURL;
});
Zobacz skrzypkę demo tutaj: http://jsfiddle.net/teddyrised/pqxsj8v9/
Jeśli twoja animacja jest oparta na jQuery, tj. Przy użyciu .animate() po prostu użyj funkcji wywołania zwrotnego:
$(ele).animate({
// Animate stuff
}, duration, function() {
// Load new URL
window.location.href = newURL;
});
Zobacz skrzypkę demo tutaj: http://jsfiddle.net/teddyrised/ad0vtqyt/
0 dla odpowiedzi № 3
jak uruchamiasz animację, wspomniałeś o jquery, więc jeśli używasz jquery do animacji, zawsze możesz użyć wywołania zwrotnego, aby załadować stronę lub ustawić limit czasu itp.
$(".someElement".animate({}, timeFrame, function () {
// fire cod ein here or set a timeout for when the whole animation is done
setTimout(function () {
//code here
}, timeForAnimationToFinish):
});
jeśli dodajesz klasy i używasz przejścia css3, zawsze możesz:
$("#someThing").addClass("animateMeFor30Seconds", function () {
var someThing = $(this);
setTimeout(function () {
//next animation
}, 30000);
});
Nie jest najlepszy, ale przejdzie testy jednostkowe i pozwoli ci się odbić :-)