当父元素具有visibility：hidden时，CSS3动画是否运行？ [英] Does a CSS3 animation run when parent element has visibility: hidden?

问题描述

我有一个CSS3 动画（以及相关的 @keyframes ）：

  animation：myAnimation 2.1s cubic-bezier（0.65，0.815 ，0.735,0.395）无限; 
  

即使你看不到它，这个动画是否正在运行元素有 visibility：hidden

解决方案

即使父容器具有 visibility：hidden ，因为该元素仍然存在并且仅被隐藏。在下面的代码片段中，您可以验证 .output div的内容，以确保它保持运行， marginLeft 保持更改。

  window.onload = function（）{var animEl = document.querySelector（'。animated'）; var outputEl = document.querySelector（'。output'）; window.setTimeout（function（）{outputEl.textContent ='当可见性变为隐藏时的边距：'+ window.getComputedStyle（animEl）.marginLeft; document.querySelector（'。wrapper'）。style.visibility ='hidden'; window .setTimeout（function（）{outputEl.textContent ='当可见性变为可见时，剩余边距：'+ 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;} @关键帧移动{到{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 Spec ，只设置 display：none 终止正在运行的动画

将display属性设置为none将终止应用于元素及其后代的任何正在运行的动画。如果元素的显示为none，将显示更新为none以外的值将启动通过'animation-name'属性应用于元素的所有动画，以及应用于显示为'none'。

如下面的代码片段所示，当 display 设置为 none ，并且在第一个关键帧重新启动 code>。

  window.onload = function（）{var animEl = document.querySelector（'。animated'）; var outputEl = document.querySelector（'。output'）; window.setTimeout（function（）{outputEl.textContent ='当显示变为none时的边距：'+ window.getComputedStyle（animEl）.marginLeft; document.querySelector（'。wrapper'）。style.display ='none'; window .setTimeout（function（）{outputEl.textContent ='当显示变为块时，剩余边距：'+ 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;} @关键帧移动{到{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>   

I have a CSS3 animation defined (and associated @keyframes):

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

Even though you can't see it, is this animation running (and consuming resource) if the parent element has visibility: hidden?

解决方案

Yes, the animations continue to run even if the parent container has visibility:hidden because the element is still there and it is only hidden. In the below snippet you can verify the contents of .output div to see that it keeps running and marginLeft keeps changing.

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>

---

As per W3C Spec, only setting display: none terminates a running animation (and we can take that as won't start an animation also).

Setting the display property to ‘none’ will terminate any running animation applied to the element and its descendants. If an element has a display of ‘none’, updating display to a value other than ‘none’ will start all animations applied to the element by the ‘animation-name’ property, as well as all animations applied to descendants with display other than ‘none’.

As you can see in the below snippet, the animation is terminated when display is set to none and is restarted from first keyframe when it is set back to 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>

这篇关于当父元素具有visibility：hidden时，CSS3动画是否运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！