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

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实现google material design。

目前我能想到一个方法（不完美）。当:not(:hover) 设置animation-duration: 1ms;。让动画快速结束。但是用户还是会看短视频。

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

无法设置为 0 毫秒。否则动画在用户悬停之前不会播放。

有没有更好的办法？

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

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