CSS结束动画？

Question

所以当像这样加载类时，我可以轻松制作动画：

@keyframes dropin {
    from {top: -100px;}
    to {top: 0;}
}
.menu {
    display: none;
    animation: dropin .4s;
}

因此，当我点击一个按钮时，javascript会执行并将display:none属性更改为block并播放fadein动画。

然而。当它变回display: none时，没有动画。有没有办法解决这个问题？如果不;我怎么能这样做呢？

Answer 1

CSS动画仅在元素可见时播放。对于您的情况，我建议使用adapt以淡入淡出。 尝试将transition用于transition: opacity 0.4s;并使用Javascript或jQuery更改不透明度。

顺便说一句，如果你使用的是jQuery，你可以这样做：

.menu

Answer 2

Display: none与opacity: 0不同。

尝试使用opacity: 0代替Display: none

Answer 3

当它改回来时，不要立即设置显示，而是使用超时

setTimeout(function() {
    //set display none here
}, 400) //400 = 0.4s

[注意：你应该在出现＆＃39;之前清除超时时间。动画再次]

Answer 4

显示是一步更改，因此您无法设置动画，在这种情况下，它可以是块之一，也可以不是。所以你应该使用不透明度。通过使用此css并切换动画类，您可以获得所需的结果。

printf %"$(tput cols)"s |tr " " "-"

在您对问题进行更新后，您仍然可以通过更改“不透明度”来做到这一点。与＆＃39; top＆＃39;