Question

我有一个简单的 Javascript 脚本，当用户点击导航中的链接到下一个子页面时，它会在页面之间进行淡入淡出过渡。

当用户在 iPhone 或任何移动设备上转到某个子页面，然后在浏览器中点回箭头时，此转换不起作用。此时整个屏幕将保持黑色。在桌面上，它正在工作。

我已经在这个网站上使用过这个过渡：my site

当用户在移动浏览器中点击返回箭头时，是否有任何 Javascript 解决方案可以解决这个问题？

//pages transition
const videoContainer = document.getElementById('specificVideoContainer');

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

document.addEventListener('DOMContentLoaded', function(event) {
    document.querySelector('body').style.opacity = 1
    videoContainer.style.transform = 'translateY(0px)'
})

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

#specificVideoContainer {
    transform: translateY(30px);
    transition: transform .5s;
}

<body>
<div id="specificVideoContainer">XX</div>
</body>

Javascript：iOS 上子页面之间的淡入淡出过渡问题

0 个答案: