css - CSS 中的 `animation-play-state` 怎么可以一开始就设置为 `paused` 然后改成 `running` 呢？

Question

使用 CSS 和 HTML，创建了一个复选框、一个 index 和一个 content div。index位置固定， float 在左边。content 将其宽度调整为可用空间，因此它位于 index 旁边。checkbox 在两种状态之间切换::not(:checked) 将索引和内容向右移动。:checked 将索引和内容向左移动，将 index 推离屏幕。

这些移动是 CSS3 动画:moveindexleft、movecontentleft、moveindexright 和 movecontentright。index 和 content 的 animation-play-state 初始设置为 paused。勾选 checkbox 将其更改为 running。这是为了防止在页面初始加载后立即播放动画。

在 Firefox 42.0 和 Chromium 47.0.2526.80(64 位)中进行测试，问题是这个初始的 animation-play-state: paused 被忽略了。

结果:https://jsfiddle.net/Lmzyxzhs/

如何让CSS中的animation-play-state初始设置为paused，然后改为running？

注意:如果最初设置为 animation-play-state: paused !important;，则复选框切换不会覆盖它，禁用所有动画。

此外，在单击复选框并启动动画后似乎有轻微的延迟。这可以优化吗？

Answer 1

animation-play-state 属性没有问题，所有浏览器都不会忽略它。您面临的问题是因为选择器及其工作方式。 :not(:checked) 选择器将匹配复选框的原始/默认状态，这也是因为它未被选中。这与 :not(:checked) 选择器稍后出现在您的 CSS 文件中的事实相结合，并且它比 div#index 或 div 具有更多的特异性#content 选择器使在此 :not(:checked) 选择器(running)中定义的动画播放状态设置优先。这就是动画也在页面加载时执行的原因。

据我所知，您无法同时实现 (a) 加载时暂停动画和 (b) 当未单独使用 CSS 选择器选中复选框时实现反向动画。在任何给定点，您只能让其中一个起作用。

因此，推荐的解决方案是使用 JavaScript(或任何首选库)并在用户第一次单击复选框时向元素添加一个类。然后 :checked 或 :not(:checked) 样式只有当复选框有这个额外的类时才能应用。

var chkBox = document.getElementById('toggle');

chkBox.addEventListener('click', function(){
  this.classList.add('user-interacted');
});

div#index {
  position: fixed;
  float: left;
  width: 10em;
  left: 0em;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-duration: 1s;
}
div#content {
  width: auto;
  margin-left: 10em;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-duration: 1s;
}
@keyframes moveindexleft {
  0% {
    left: 0em;
  }
  100% {
    left: -10em;
  }
}
@keyframes movecontentleft {
  0% {
    margin-left: 10em;
  }
  100% {
    margin-left: 0em;
  }
}
@keyframes moveindexright {
  0% {
    left: -10em;
  }
  100% {
    left: 0em;
  }
}
@keyframes movecontentright {
  0% {
    margin-left: 0em;
  }
  100% {
    margin-left: 10em;
  }
}
input[type=checkbox] {
  display: none;
}

/* note the change in selectors */
input[type=checkbox].user-interacted:not(:checked) ~ div#index {
  animation-play-state: running;
  animation-name: moveindexright;
}
input[type=checkbox].user-interacted:not(:checked) ~ div#content {
  animation-play-state: running;
  animation-name: movecontentright;
}
input[type=checkbox].user-interacted:checked ~ div#index {
  animation-play-state: running;
  animation-name: moveindexleft;
}
input[type=checkbox].user-interacted:checked ~ div#content {
  animation-play-state: running;
  animation-name: movecontentleft;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<label for="toggle">
  Button
</label>

<input id="toggle" type=checkbox>
<div id="index">
  index
</div>

<div id="content">
  content
</div>

---

或者，您可以通过使用 CSS transition 来达到同样的效果(正如 vals in his comment 所指出的)。只有当用户点击复选框时才会触发转换(不像 animation 在页面加载时自动启动)。以下是此方法的示例片段。

div#index {
  position: fixed;
  float: left;
  width: 10em;
  left: 0em;
  transition: left 1s linear;
}
div#content {
  width: auto;
  margin-left: 10em;
  transition: margin-left 1s linear;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:not(:checked) ~ div#index {
  left: 0em;
}
input[type=checkbox]:not(:checked) ~ div#content {
  margin-left: 10em;
}
input[type=checkbox]:checked ~ div#index {
  left: -10em;
}
input[type=checkbox]:checked ~ div#content {
  margin-left: 0em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<label for="toggle">
  Button
</label>

<input id="toggle" type=checkbox>
<div id="index">
  index
</div>

<div id="content">
  content
</div>