javascript - 在延迟加载页面时触发 CSS 转换

Question

因此，我使用以下 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;
}

Answer 1

正确的函数应该是:

window.onload = setTimeout(function(){document.body.setAttribute("class", document.body.getAttribute('class') + " loaded");}),10000)

如果您正在为此寻找仅 javascript 的答案(适用于所有内容)。

我还假设这只会应用于页面的初始加载。