Question

我定义了CSS3 animation（和关联的@keyframes）：

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

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

Answer 1

是的，即使父容器有visibility:hidden，动画也会继续运行，因为该元素仍然存在且只是隐藏。在下面的代码段中，您可以验证.output div的内容，看它是否一直在运行且marginLeft不断变化。

＆＃13;

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);
}

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

根据W3C Spec，只有设置display: none会终止正在运行的动画（我们也可以将其视为赢得也不会启动动画）。

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

正如您在下面的代码段中看到的那样，当display设置为none并且从第一个关键帧重新启动时，动画会被设置回{ {1}}。

＆＃13;

block

＆＃13;

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);
}

＆＃13;

.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;
  }
}

＆＃13;

Answer 2

visibility: hidden;不停止动画。它会继续动画，但不会显示给你。但分配给它的空间将在那里。

＆＃13;

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  margin-left:100%;
  visibility: hidden;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

＆＃13;

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

＆＃13;

<强> Fiddle

即使visibility:hidden，您也可以在此处查看滚动栏是否继续移动。

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

2 个答案: