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

Question

我有一个包含转换的外部样式表。当页面加载时，转场会产生动画效果。

当我从外部样式表中移动过渡并将它们放在html文件的头中时，动画在页面加载时不会产生动画效果(这正是我想要的)。

当将过渡放置在外部样式表中时，我可以做些什么来阻止过渡的动画？

下面是一些css示例：

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

如果是在css文件中，字体将从页面大小变为css文件大小。

当它位于<style>标记的头部时，它不会做任何事情。

Answer 1

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

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

​

@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;
}

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

​

如果你真的需要转换，你需要一些javascript来在至少一个帧延迟后应用一个类。

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