Question

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

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

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

2）我无法使用页面卸载事件实现动画。我认为这是对的。

请帮忙或建议一些事情。谢谢！

Answer 1

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

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

Answer 2

实际上，我在不使用链接事件的情况下找到了方法，但使用了任何UNLOAD事件。链接事件只能在小型网站上使用。在我的情况下，它创建了其他错误。例如一些链接，不应该淡出，我不知道它们中的哪一个。

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

Answer 3

我不确定我是否正确理解了你的问题。将此代码放在页面'＆lt; head＆gt; s。

中

<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>

页面褪色效果

3 个答案: