在网页上添加退出动画

Question

我正在使用 animate.css 动画 found here。我正在尝试使用 JavaScript 中的 window.onbeforeunload 功能。它适用于 Firefox，但我无法让它与 chrome 一起使用。有没有更兼容的方法来做到这一点。到目前为止，我的代码都嵌入在 html 文件中，这样我就可以解决这个问题，但是成就 ID 是备用的，class "animated fadeOutLeft" 用于调用动画，它作品。我只是想让它等到页面转到另一个内部 link 才这样做。

我的代码

<script>
    window.onbeforeunload = loadOut;
    function loadOut () {
        document.getElementById('accomplishments').className
        document.getElementById('accomplishments').className + 'animated fadeOutLeft';
    }
</script>

现在我愿意使用 JavaScript、JQuery、SASS、LESS、CSS、and/or 任何其他方法。期望的结果是让动画在用户单击内部站点 link 时出现。目标是让它看起来更像一个应用程序而不是一个网页。

Answer 1

我在 chrome 页面转换方面也遇到了一些问题，因此决定使用插件 smoothState.js . Maybe this could help. An example here。

在网页上添加退出动画

Adding Exit Animation on a Webpage

html

javascript

css

jquery

animation