如何将CSS中的"animation-play-state"初始设置为"暂停"并更改为"正在运行"？

Question

使用CSS和HTML,创建了一个复选框,一个index和一个contentdiv.它index有一个固定的位置,浮在左边浮动.将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/

animation-play-stateCSS中如何初始设置paused并更改为running？

Nb:如果最初设置为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(正如他的评论中的val所指出的那样).只有当用户点击复选框时才会触发转换(不像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>