0

当元素从 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;。让动画快速结束。但是用户仍然看一个简短的flickr。

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

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

有没有更好的方法？

4

1 回答 1

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

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

于 2014-09-30T23:09:52.707 回答