transition过渡效果在使用了display后无效

今天鸿硕开发一个主题的菜单时,由于下拉菜单比较简单,就不想使用js来搞了,直接CSS隐藏加过渡效果来实现,代码如下:

nav>ul>li .sub-menu{
    display: none;
    position: absolute;
    top: 60px;
    transition: top .4s;
    text-align: center;
}
nav>ul>li:hover .sub-menu{
    position: absolute;
    display: block;
    top: 40px;
}
搞来搞去没有办法实现过渡效果,直接就是显示隐藏的效果,根本没有过渡。也尝试了使用transform:translateY(-20px),同样没有效果。
最后结合网文,发现display和transition会有冲突,要想有transition的过渡效果就不能使用display。
大概的原因为:display:none的时候,页面文档流中将不会存在该元素,display:block的时候,文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。
目前的解决方案为:

使用visibility替代display

visibility:hidden的时候元素仍然存在于文档流中,同时opacity对应的数值0,visibility:visible时opacity对应的数值1,transition属性可以对在opacity0~1之间进行过渡。

鸿硕亲测可以实现的代码如下:

nav>ul>li .sub-menu{
    visibility: hidden;
    position: absolute;
    top: 60px;
    transition: top .4s;
    text-align: center;
}
nav>ul>li:hover .sub-menu{
    visibility: visible;
    top: 40px;
    position: absolute;
}

人已赞赏
IT百科建站知识

阿里云免费域名证书SSL安装到宝塔

2021-10-10 19:40:21

IT百科jqueryjs

jquery条件判断之后,非click或hover触发,直接给元素添加属性

2021-11-20 12:18:28

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索