Question

所以我使用以下Javascript作为触发器成功测试了两个图像的css淡入过渡效果，因此它在页面加载时启动（而不是在悬停或点击时）。现在，如何在过渡开始时添加10秒的延迟？我希望一个简单的“过渡延迟：10秒;”会做的伎俩，但它似乎被忽略了。我不想使用关键帧动画，因为它与旧版浏览器不兼容。

这是脚本：

<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答案（适用于所有内容）。

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

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

1 个答案: