css中动画和display踩过的坑

动画的过渡效果一遇到display就没有效果,是因为:
display:none的时候,页面文档流中将不会存在该元素,display:block的时候,文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。

所以display做不了过渡效果,但是可以有其他的办法做过渡效果

解决办法:

1,依然用display,但是在js中加setTimeout延迟一下
2,用opactiy,0和1是有过渡效果的
3,用visibility,visible就相当于1,hidden相当于0

发布了42 篇原创文章 · 获赞 4 · 访问量 6114

猜你喜欢

转载自blog.csdn.net/qq_43427385/article/details/100976399