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

问题描述

问 题

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

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

解决方案

你的display：none应该是立刻就执行了，并没有在transition动画后执行，所以直接就隐藏了。
如果你需要这样做的话
1、你可以延时执行dislpay：none的操作。setTimeout(function(){//执行},200);
2、如楼上操作用jQuery的animate，然后在animate的回调中设置dislpay：none；
3、直接眼红jQuery的slidedown

这篇关于前端 - [css动画] transition动画之后执行display:none，动画不生效，怎么解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！