css中display:none变为block无法触发transition的解决办法
问题
在页面开发过程中使用transition过渡是一个非常方便并能提高用户体验的属性,不会让一些元素的变化显得非常的突兀,但是元素从display:none到display:block是无法触发过渡(transition)属性的,如果说使用js来解决这个问题会添加复杂的鼠标移入移出监听事件
解决办法
最简便的方式还是使用css3解决,这样也使得js的逻辑代码更纯粹
以下代码的逻辑是:鼠标悬浮父元素触发hover之后给子元素div添加一个动画
需要注意的是这个方法只能解决父子关系的元素
<head&g
原创
2020-09-16 23:30:14 ·
2509 阅读 ·
0 评论