Question

我有一个包含过渡的外部样式表。当页面加载过渡动画时。

当我从外部样式表移动过渡并将它们放在我的html文件的标题中时，动画不会在页面加载时动画（这就是我想要的）。

放置在外部样式表中时，如何停止动画的过渡？

以下是一些示例css：

label {
    font-size: 18px;
    transition: all 0.2s ease-in-out;
}

当它在css文件中时，字体会从页面大小变为css文件大小。

当它位于<style>标记的标题中时，它不会执行任何操作。

Answer 1

这是因为样式表是同步加载的，而外部工作表是异步加载的。当它们同步加载时，不会触发转换，因为DOM只需要绘制一次;没有什么可以过渡的。同时，从外部加载样式表所需的几毫秒需要在加载后重新绘制DOM。

在这种情况下，您应该使用动画，而不是过渡。动画将在开始时运行，无论如何。

＆＃13;

@keyframes slide-in {
  from {
    opacity: 0;
    width: 0%;
  }

  to {
    opacity: 1;
    width: 100%;
  }
}

.animate-me {
  background: red;
  height: 100px;
  color: white;
  
  animation: slide-in 1s ease-in-out;
}

＆＃13;

<div class="animate-me">animate me on load</div>

＆＃13;

如果你确实需要转换，那么在至少一帧延迟之后你需要一些javascript来应用一个类。

setTimeout(function() {
    // apply class to elements
}, 0);

css动画在加载时使用外部样式表播放

1 个答案: