当父元素具有可见性时,是否运行CSS3动画:隐藏？

Question

我定义了一个CSS3 动画(并关联@keyframes):

animation: myAnimation 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;

即使你看不到它,如果父元素有,这个动画是否正在运行(和消耗资源)visibility: hidden？

Answer 1

是的,即使父容器有动画,动画也会继续运行,visibility:hidden因为该元素仍然存在并且只是隐藏.在下面的代码片段中,您可以验证.outputdiv 的内容,以查看它是否继续运行并marginLeft不断更改.

window.onload = function() {
  var animEl = document.querySelector('.animated');
  var outputEl = document.querySelector('.output');
  window.setTimeout(function() {
    outputEl.textContent = 'Margin left when visibility becomes hidden: ' + window.getComputedStyle(animEl).marginLeft;
    document.querySelector('.wrapper').style.visibility = 'hidden';
    window.setTimeout(function() {
      outputEl.textContent = 'Margin left when visibility becomes visible: ' + window.getComputedStyle(animEl).marginLeft;
      document.querySelector('.wrapper').style.visibility = 'visible';
    }, 1000);
  }, 1000);
}

.wrapper{
  white-space: nowrap;
}
.wrapper > div {
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid;
}
.animated {
  animation: move 3s linear infinite;
}
@keyframes move {
  to {
    margin-left: 300px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='wrapper'>
  <div class='animated'></div>
  <div class='sibling'></div>
</div>
<div class='output'></div>

根据W3C规范,只有设置display: none终止正在运行的动画(我们可以采取它,因为也不会启动动画).

将display属性设置为'none'将终止应用于该元素及其后代的任何正在运行的动画.如果元素的显示为"none",则将显示更新为"none"以外的值将启动"animation-name"属性应用于元素的所有动画,以及应用于具有除"none"以外的显示的后代的所有动画. '没有'.

正如你可以在下面的摘要中看到,当动画结束display设为none并从第一个关键帧重新启动时,它被设置回block.

window.onload = function() {
  var animEl = document.querySelector('.animated');
  var outputEl = document.querySelector('.output');
  window.setTimeout(function() {
    outputEl.textContent = 'Margin left when display becomes none: ' + window.getComputedStyle(animEl).marginLeft;
    document.querySelector('.wrapper').style.display = 'none';
    window.setTimeout(function() {
      outputEl.textContent = 'Margin left when display becomes block: ' + window.getComputedStyle(animEl).marginLeft;
      document.querySelector('.wrapper').style.display = 'block';
    }, 1000);
  }, 1000);
}

.wrapper {
  white-space: nowrap;
}
.wrapper > div {
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid;
}
.animated {
  animation: move 3s linear infinite;
}
@keyframes move {
  to {
    margin-left: 300px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='wrapper'>
  <div class='animated'></div>
  <div class='sibling'></div>
</div>
<div class='output'></div>