Question

我有一个充当加载指示符的元素。它始终存在于我的页面上，并通过添加/删除改变其不透明度和z-index的类来显示/隐藏。该元素包含使用CSS动画的图像。

我担心这会对页面效率低下，因为当加载程序不在屏幕上时，动画可能仍然无形地发生。

我尝试过什么

我这样做是为了动画只在元素具有visible类时才起作用，但这会导致一个刺耳的效果，因为一旦删除了类，动画就会停止，在加载器改变之前淡出。在动画中添加transition似乎没有任何效果。

Answer 1

是的，他们这样做。请参阅以下小提琴==＆gt; JS FIDDLE SHOWING CHANGE

<强> CSS

@keyframes anim{
    0%{margin-left:0;}
    100%{margin-left:80%;}
}
@-webkit-keyframes anim{
    0%{margin-left:0;}
    100%{margin-left:80%;}
}
h3{
    float:left;
    position:absolute;
}
div{
    visibility:hidden;
    background:black;
    width:50px;
    height:50px;
    float:left;
    animation: anim 5s;
    -webkit-animation: anim 5s infinite; /* Safari and Chrome */
}

<强> HTML

<div id="div">
   Div
</div>
<h3></h3>

<强> JS

setInterval(function() {
    jQuery('h3').text('Margin is:'+ jQuery('div').css('margin-left'))
},1000);

^显示h3中的结果

Answer 2

虽然不确定隐藏在元素上的动画是否仍然存在，但您可以使用animation-iteration-count在一定次数的迭代后结束动画。

在不需要时使用class="is-hidden"隐藏加载程序。
将.is-hidden应用于加载程序时，将微调框的animation-iteration-count从infinity更改为5。

这将使微调器再做5次旋转，然后结束动画。这5次旋转将在装载机逐渐消失时发生。显然，如果5不足以覆盖淡出持续时间，则可以增加迭代次数/旋转次数。

LIVE DEMO （在.is-hidden添加和删除.loader）

/* CSS */

@keyframes spin {
  to { transform: rotateZ(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }  
  to   { opacity: 0; }
}

.loader {
  /* loader styles... */

  animation: fadeIn 1s forwards;
}

.spinner {
  /* spinner styles... */

  animation: spin 0.5s linear infinite;
}

.loader.is-hidden {
  animation: fadeOut 1s forwards;
}

.loader.is-hidden .spinner {
  animation-iteration-count: 5;
}

看不见时，CSS动画仍然会发生吗？

2 个答案: