JS返回按钮动画

Question

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

我如何在 Javascript 中执行此操作？

Answer 1

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

在您的 DOM 中，您将 link 放置到其他页面，而不是使用 <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;
}

这将产生以下效果：

页面加载时，正文将在半秒内淡出当你点击一个 link 时，正文会淡出，半秒后浏览器会转到下一页这是示例片段

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>

编码愉快！

JS返回按钮动画

JS back button animation

javascript

dom-events

css-animations