0

我需要实现加载/卸载页面动画在加载时淡入，在卸载时淡出。

1）我已经阅读了一些关于基于链接点击实现它的文章。那对我不起作用。我不想那样做，因为有些链接实际上不应该打开新页面，并且有href。

所以想象一下：链接有正确的href，但有时它会打开新页面，有时不会，基于它的处理程序行为。我们添加了另一个始终触发重定向的处理程序作为超时回调。

2) 我无法使用页面卸载事件实现动画。我认为这是正确的方式。

请提供帮助或建议。谢谢你！

4

3 回答 3

0

提供您想要为课程设置动画的链接。然后您可以使用该.click()方法检查单击链接的时间。然后执行 preventDefault 以停止默认行为。接下来要做的是检查 href 属性中是否有“http”。您可以使用 获取值$(this).attr('href');。如果链接包含此内容，您需要转到新页面。为此，使用window.location.href. 将此方法调用为您的fadeOut().

唯一剩下的就是在页面加载时淡入；）

于 2013-05-20T09:22:49.950 回答
0

实际上，我在不使用链接事件的情况下找到了方法，而是使用了任何 UNLOAD 事件。链接事件只能在小型网站上使用。就我而言，它产生了额外的错误。例如一些链接，不应该淡出，我不知道它们中的哪一个。

所以我不建议这样做。需要找到任何 UNLOAD 页面重定向动画的方式。

于 2013-11-18T08:02:29.550 回答
0

我不确定我是否正确理解了您的问题.. 将此代码放在页面的 <head> 中。

<style>
    @keyframes page_transition
    {   
        from {opacity: 0;}
        to {opacity: 1;}
    }
    @-webkit-keyframes page_transition
    {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    html
    {
        animation: page_transition 1s ease-in-out;
        -webkit-animation: page_transition 1s ease-in-out;
    }
    html.unloading
    {
        transition: opacity 500ms linear !important;
        opacity: 0 !important;
    }
</style>
<script>
    window.addEventListener("beforeunload", function() {
            document.documentElement.classList.add("unloading");
        });
</script>
于 2016-12-01T04:29:51.673 回答