Question

我正在尝试使用css动画创建整页转换。我来路上岔路口。我在我的链接上放了一个类，并使用JQuery调用它，然后将css类应用于页面以激活转换。现在，当我分配新窗口位置时，它想要覆盖动画。这就像我可以拥有一个或另一个，而不是两者，至少不是我怎么做...任何提示？

这是代码

$(document).ready(function() {

    var linkLocation

    $("a.transition").click(function(event){
      event.preventDefault();
      linkLocation = this.href;
      redirectPage();      

    });

    function redirectPage() {
        $("body").attr('class', 'page-rotateSlideOut');
        window.location = linkLocation;
    }

});

Answer 1

window.location = linkLocation将刷新页面。这就是你的过渡无效的原因。

如果您的.page-rotateSlideOut样式有持续时间，则可以执行以下操作：

setTimeout(function() { window.location = linkLocation; }, duration);

Answer 2

尝试使用setTimeout。

像

$("a.transition").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("body").attr('class', 'page-rotateSlideOut');
    setTimeout(redirectPage,5000);    

});

删除$("body").attr('class', 'page-rotateSlideOut');

中的redirectPage

我的页面转换无效

2 个答案: