Question

当一个元素从display：none到显示状态时，动画总是播放。如果我想要样式自定义复选框。我只需要在用户检查或取消选中时播放动画。

input[type=checkbox] { opacity: 0; } // native checkbox hidden
input[type=checkbox] ~ .mycheck {
    animation: uncheck 300ms ease-out forwards; // play uncheck animate
}
input[type=checkbox]:checked ~ .mycheck {
    animation: check 300ms ease-out forwards; // play checked animate
}

问题是check和uncheck不仅在用户点击时播放。它也在页面加载时播放。或者当父元素切换隐藏到显示时。例如在引导标签中。

我知道javascript可以轻松应对。但事实上，这个问题来自一个感兴趣的github项目https://github.com/FezVrasta/bootstrap-material-design/issues/48。那个英俊的男孩想通过bootstrap3实现谷歌材料设计。

目前我可以想到一种方式（不完美）。当:not(:hover)设置animation-duration: 1ms;时。让动画快速结束。但是用户仍然看起来很短暂。

input[type=checkbox]:not(:hover) ~ .mycheck {
    animation-duration: 1ms;
}

无法设置为0ms。否则动画不会播放，直到用户将其悬停。

有没有更好的方法？

Answer 1

您可以使用:not(:hover)想到的解决方案，只需使用以下内容取消动画：

input[type=checkbox]:not(:hover) ~ .mycheck {
    animation: none;
}

或者，我认为这是最好的解决方案，不要使用动画，而是使用转换。这会产生类似的结果（假设你是不透明的动画）：

input[type=checkbox] ~ .mycheck {
    opacity: 0;
    transition: opacity .3s ease-out;
}

input[type=checkbox]:checked ~ .mycheck {
    opacity: 1;
}

此外，根据您要实现的浏览器支持，请注意供应商前缀，因为Chrome最近才将它们放在转换属性上

编辑：经过一些测试，我认为只使用:focus伪类就足够了：

input[type=checkbox]:focus ~ .mycheck {
    animation: uncheck 300ms ease-out forwards;
}
input[type=checkbox]:focus:checked ~ .mycheck {
    animation: check 300ms ease-out forwards;
}

我能看到的唯一缺点是当复选框失去焦点时，动画可能会被取消

这是一种在显示时跳过css3动画的方法吗？

1 个答案: