前端 - [css动画] transition动画之后执行display:none,动画不生效,怎么解决?
ringa_lee
ringa_lee 2017-04-17 14:53:50
0
3
1141

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

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

ringa_lee
ringa_lee

ringa_lee

Antworte allen(3)
刘奇

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

黄舟

动画可以写在jQueryanimate()中,动画完成后执行让它display:none的回调函数

小葫芦

监听transitionend事件,在回调里面执行display:none操作

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage