CSS3动画在显示更改时触发

CSS3动画在显示更改时触发,第1张

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

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

最佳答案:

2 个答案:

答案 0 :(得分:3)

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

Updated fiddle.

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

答案 1 :(得分:1)

将所有内容包装在一个容器中并使用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

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复