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

Question

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

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

Answer 1

あなたの表示: none は遷移アニメーションの後ではなく、すぐに実行されるべきなので、直接非表示になります。
これを行う必要がある場合
1. dislpay:none の実行を遅らせることができます。 setTimeout(function(){//execute},200);
2. 上記の操作に jQuery の animate を使用し、animate のコールバックで dislpay: none を設定します。
3. jQuery のスライドダウンを直接羨望します。 p>

Answer 2

アニメーションは、jQuery の animate() で記述できます。アニメーションが完了したら、display:none にするコールバック関数を実行します。 >

Answer 3

transitionend イベントをリッスンし、コールバックで display:none オペレーションを実行します。