CSS3动画在显示更改时触发

Question

我正在尝试使用CSS3动画以淡化页面加载中的元素。有了这个，我需要将元素设置为display: none;，然后再返回display: block;。

我只希望CSS3动画用于元素的初始加载而不是通过显示。如果不跟踪动画是否已完成JavaScript，这是否可行？我这里有一个JS小提琴示例https://jsfiddle.net/L219ezkd/1/

Answer 1

您可以保留标记，并使用visibility属性。在.hover-hide元素上，在hidden和visible之间切换。

Updated fiddle.

（这是因为元素是绝对定位的。如果它们不是，visibility: hidden;将不会产生所需的行为，因为它保留了元素使用的空间并简单地隐藏它而不是像{{{{}}那样完全删除它。 1}}。）

Answer 2

将所有内容包装在一个容器中并使用css淡化，然后显示并隐藏您现在正在执行的元素：

<div class="container">
  <div id="hover-hide" class="fade fade-in" style="width: 100px; height: 100px; background:blue; display:block; position: absolute; top:0; left:0">  </div>
  <div id="hover-show" style="width: 100px; height: 100px; background:red; display:none; position: absolute; top:0; left:0"></div>
</div>

updated fiddle