मेरे मन में कुछ फीका-इन्स, फिर एक फीकापन, और एक नए पेज में लोड (लक्ष्य = आत्म) होने का अंत है। कुछ googling से, यह लगता है कि css एनीमेशन doesn "t अंतिम कदम (एक नया URL प्राप्त करना) नहीं है।
क्या ऐसा करने का एक सरल तरीका है? शुरुआती पृष्ठ लोडिंग jquery होगा। किसी भी तरह नए URL को एनीमेशन समाप्त होने तक इंतजार करना होगा।
अद्यतन करें
अंत में, मैंने उपयोग किया इस सीएसएस एनीमेशन ट्यूटोरियल 5 सेकंड का एनीमेशन बनाने के लिए, सभी सीएसएस को अंदर डालें <head> और आधार में पृष्ठ में छवियों को चिपकाया (नहींआगे HTTP अनुरोध), परिणामी फ़ाइल आकार (11 केबी) की जाँच की, उस आकार की फ़ाइलों के लिए मेरा औसत पृष्ठ लोड समय (1 सेकंड से कम) देखने के लिए Google Analytics की जाँच की, फिर पृष्ठ में जोड़ा गया <META http-equiv="refresh" content="8; url=page2.html">। 1990 के दशक से कुछ महसूस होता है, लेकिन यह काम करता है।
उत्तर:
जवाब के लिए 0 № 1यदि एनीमेशन का समय हमेशा समान होता है, तो आप एनीमेशन के समय को नियंत्रित कर सकते हैं, और इस समय के बाद पृष्ठ को लोड कर सकते हैं।
उत्तर № 2 के लिए 1
यह निर्भर करता है कि क्या आपका एनीमेशन CSS या jQuery द्वारा संचालित है, कुछ अन्य लोगों द्वारा भी उठाया गया प्रश्न। यदि यह CSS-based है, तो आप कर सकते हैं ध्यान दो animationend घटना (क्रॉस-ब्राउज़र संगतता को अधिकतम करने के लिए उपयुक्त विक्रेता उपसर्गों के साथ जोड़ा गया):
$(ele).one("webkitAnimationEnd oanimationend msAnimationEnd animationend", function() {
// Load new URL
window.location.href = newURL;
});
डेमो फिडल यहां देखें: http://jsfiddle.net/teddyrised/pqxsj8v9/
यदि आपका एनीमेशन jQuery द्वारा संचालित है, अर्थात .animate() विधि, बस कॉलबैक फ़ंक्शन का उपयोग करें:
$(ele).animate({
// Animate stuff
}, duration, function() {
// Load new URL
window.location.href = newURL;
});
डेमो फिडल यहां देखें: http://jsfiddle.net/teddyrised/ad0vtqyt/
जवाब के लिए 0 № 3
आप एनीमेशन कैसे फायर कर रहे हैं, आपने jquery का उल्लेख किया है, इसलिए यदि आप एनीमेशन के लिए jquery का उपयोग कर रहे हैं, तो आप हमेशा अपने पेज को लोड करने के लिए कॉलबैक का उपयोग कर सकते हैं या एक टाइमआउट सेट कर सकते हैं आदि।
$(".someElement".animate({}, timeFrame, function () {
// fire cod ein here or set a timeout for when the whole animation is done
setTimout(function () {
//code here
}, timeForAnimationToFinish):
});
यदि आप कक्षाएं जोड़ रहे हैं और css3 संक्रमण का उपयोग कर रहे हैं, तो आप हमेशा कर सकते हैं:
$("#someThing").addClass("animateMeFor30Seconds", function () {
var someThing = $(this);
setTimeout(function () {
//next animation
}, 30000);
});
यह सबसे बड़ा नहीं है, लेकिन यह आपकी इकाई परीक्षणों को पास करेगा और आपको रिफ्लेक्टर की अनुमति देगा :-)