因此,我使用以下 Javascript 作为触发器成功测试了两个图像的 css 淡入过渡效果,因此它会在页面加载时启动(而不是在悬停或单击时启动)。现在如何在过渡开始时添加 10 秒延迟?我希望有一个简单的“transition-delay: 10s;”可以解决问题,但它似乎被忽略了。我不想使用关键帧动画,因为它与旧浏览器不兼容。
这是脚本:
<script type="text/javascript">
window.onload = function(){
document.body.setAttribute("class", document.body.getAttribute('class') + " loaded");
}
</script>
这是我的 CSS:
#MountainsBkg1 img {
width: 2348px;
opacity: 1;
position: absolute;
left: 0;
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3s;
transition-delay: 10s;
}
#builder-layout-52bf21c0ea5ff.loaded #MountainsBkg1 img {
opacity:0;
}
最佳答案
正确的函数应该是:
window.onload = setTimeout(function(){document.body.setAttribute("class", document.body.getAttribute('class') + " loaded");}),10000)
如果您正在为此寻找仅 javascript 的答案(适用于所有内容)。
我还假设这只会应用于页面的初始加载。
关于javascript - 在延迟加载页面时触发 CSS 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20893234/