使用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;,则复选框切换不会覆盖此项,禁用所有动画.
此外,单击复选框并启动动画后似乎有一点延迟.这可以优化吗？
该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;
}
index
content
京公网安备 11010802040832号 | 京ICP备19059560号-6 