Question

我想到了一些淡入淡出，然后是淡出，并以加载的新页面结束（target = self）。从一些谷歌搜索，似乎CSS动画没有预见到最后一步（获取一个新的URL）。

有一种简单的方法吗？起始页面将加载jquery。不知何故，新的URL必须等到动画结束。

更新

最后，我使用this css animation tutorial制作了一个5秒钟的动画，在<head>中插入了所有css并在base64中粘贴了页面中的图像（没有其他HTTP请求），检查了生成文件大小（11Kb），选中Google Analytics以查看我的平均页面加载时间，该文件的大小（小于1秒）然后添加到页面<META http-equiv="refresh" content="8; url=page2.html">。感觉就像20世纪90年代的东西，但它确实有效。

Answer 1

这取决于你的动画是由CSS还是jQuery驱动的，这也是其他几个人提出的问题。如果它是基于CSS的，您可以listen to the animationend event（添加适当的供应商前缀以最大化跨浏览器兼容性）：

$(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/

Answer 2

如果动画时间始终相同，您可以处理动画的确切时间，并在此时间后加载页面。

Answer 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):

});

jquery animate docs

如果要添加类并使用css3转换，您可以随时执行：

$('#someThing').addClass('animateMeFor30Seconds', function () {
    var someThing = $(this);
    setTimeout(function () {
        //next animation
    }, 30000);
});

这不是最好的，但它会通过你的单元测试并允许你转换： - ）

如何通过加载新URL完成css动画？

3 个答案: