84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
大家好，我遇到的问题是一个类似于微信聊天的时候点击加号出现菜单，
打开菜单的时候没有什么问题，关闭菜单是先transition动画，然后设置display为none但是这样做好像display会破坏transition的执行，动画不会生效，请问怎么解决这个问题？
ringa_lee
你的display：none应该是立刻就执行了，并没有在transition动画后执行，所以直接就隐藏了。如果你需要这样做的话1、你可以延时执行dislpay：none的操作。setTimeout(function(){//执行},200);2、如楼上操作用jQuery的animate，然后在animate的回调中设置dislpay：none；3、直接眼红jQuery的slidedown
动画可以写在jQuery的animate()中，动画完成后执行让它display:none的回调函数
jQuery
animate()
display:none
监听transitionend事件，在回调里面执行display:none操作
transitionend
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你的display：none应该是立刻就执行了，并没有在transition动画后执行，所以直接就隐藏了。
如果你需要这样做的话
1、你可以延时执行dislpay：none的操作。setTimeout(function(){//执行},200);
2、如楼上操作用jQuery的animate，然后在animate的回调中设置dislpay：none；
3、直接眼红jQuery的slidedown
动画可以写在
jQuery的animate()中，动画完成后执行让它display:none的回调函数监听
transitionend事件，在回调里面执行display:none操作