Question

使用CSS和HTML，创建了一个复选框，index和content div。 index具有固定的位置，浮动在左侧浮动。 content将其宽度调整为可用空间，从而取代index。 checkbox在两个州之间切换： :not(:checked)将索引和内容移动到右侧。 :checked将索引和内容移到左侧，将index推离屏幕。

这些动作是CSS3动画：moveindexleft，movecontentleft，moveindexright和movecontentright。 index和content的{{1}}初始设置为animation-play-state。将paused更改为checkbox。这是为了防止在初始加载页面后立即播放动画。

在Firefox 42.0和Chromium 47.0.2526.80（64位）中进行测试，问题是忽略了这个初始running。

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

如何将CSS中的animation-play-state: paused初始设置为animation-play-state并更改为paused？

N.b。：如果最初设置为running，则复选框切换不会覆盖此项，禁用所有动画。

此外，点击复选框并启动动画后，似乎有一点延迟。这可以优化吗？

Answer 1

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

据我所知，你不能同时实现（a）在加载时暂停动画，以及（b）在单独使用CSS选择器未选中复选框时进行反向动画。在任何给定的点上，你只能得到其中一个。

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

＆＃13;

:not(:checked)

＆＃13;

var chkBox = document.getElementById('toggle');

chkBox.addEventListener('click', function(){
  this.classList.add('user-interacted');
});

＆＃13;

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

＆＃13;

或者，您可以通过使用CSS <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>（由vals in his comment指出）来实现相同的效果。只有当用户点击复选框时才会触发转换（与在页面加载时自动启动的transition不同）。以下是此方法的示例代码段。

＆＃13;

animation

＆＃13;

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

＆＃13;

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

1 个答案: