JS后退按钮动画

Question

我想创建一个页面转换，如您在 this website 上看到的那样。 如您所见，每次用户单击链接时，都会触发动画，然后将您带到下一页；我已经做了这件事。 我的问题是当用户按下后退按钮时，我找不到触发上述动画的方法。

我怎么能在 Javascript 中做到这一点？

Answer 1

这是一个需要一些 CSS 和 Javascript 知识的解决方案：

在您的 DOM 中，您可以在其中放置指向其他页面的链接，而不是使用 <a> 标签，而是使用普通的 <span> 并附加一个 onclick 属性，如下所示：

<span onclick="transitionToPage('https://www.google.com')"></span>

（可以使用and href，但需要解析出目标href，防止出现默认事件。）

然后在您的 Javascript 中，输入以下代码：

window.transitionToPage = function(href) {
    document.querySelector('body').style.opacity = 0
    setTimeout(function() { 
        window.location.href = href
    }, 500)
}

document.addEventListener('DOMContentLoaded', function(event) {
    document.querySelector('body').style.opacity = 1
})

最后，在您的 CSS 代码中：

body { 
   opacity: 0;
   transition: opacity .5s;
}

这将产生以下效果：

当页面加载时，body 会在半秒内淡出 当你点击一个链接时，body 会淡出，半秒后浏览器会跳转到下一页 这是示例 sn-p

window.transitionToPage = function (href) {
            document.querySelector('body').style.opacity = 0
            setTimeout(function () {
                window.location.href = href
            }, 500)
        }

        document.addEventListener('DOMContentLoaded', function (event) {
            document.querySelector('body').style.opacity = 1
        })

body {
            opacity: 0;
            transition: opacity .5s;
            font-size: 20px;
        }

 <span onclick="transitionToPage('https://www.bing.com')" style="text-decoration: underline;cursor: pointer;color: blue;">click me</span><br>
    <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae expedita saepe, hic, facere adipisci unde
        ut tempora exercitationem tenetur cupiditate reprehenderit modi eius voluptatum qui incidunt quisquam
        voluptates. Ab dolores, tenetur doloremque iure sint neque illo fuga eum tempora dignissimos distinctio ex
        doloribus nostrum error at dolore id ullam, voluptatibus ut iusto atque. Nemo ratione ea, magnam placeat
        doloremque voluptas impedit architecto beatae, sapiente sequi dolore reiciendis recusandae nihil. Minus
        perferendis corrupti consequuntur possimus voluptates natus est! Incidunt quae nihil magni corporis, voluptas
        suscipit molestiae modi facere unde excepturi autem soluta? Deserunt nobis nesciunt in expedita, cumque
        blanditiis quam ea.
    </span>

编码愉快！