前端 - [css动画] transition动画之后执行display:none，动画不生效，怎么解决？

Question

大家好，我遇到的问题是一个类似于微信聊天的时候点击加号出现菜单，

打开菜单的时候没有什么问题，关闭菜单是先transition动画，然后设置display为none
但是这样做好像display会破坏transition的执行，动画不会生效，请问怎么解决这个问题？

Answer 1

Your display: none should be executed immediately, not after the transition animation, so it is hidden directly.
If you need to do this
1. You can delay the execution of the dislpay:none operation. setTimeout(function(){//execute},200);
2. Use jQuery’s animate for the above operation, and then set dislpay: none in the callback of animate;
3. Directly envy jQuery’s slidedown

Answer 2

Animation can be written in jQuery of animate(). After the animation is completed, execute the callback function display:none that makes it

Answer 3

Listen to the transitionend event and perform the display:none operation

in the callback