纯CSS怎样实现类似JQuery的slideDown呢?

2021-01-14 10:52:00
CSS JQuery

纯CSS怎么实现JQuery的slideDown?下面我们先来看这一段css代码

.a .sub{overflow:hidden;height:0;transtion:all 0.5s;}
.a:hover .sub{height:auto;}

上面的代码并不能实现我们想要的效果。效果如下:

transition 不支持 height: auto

所以,你要设置真实的高度才行,例如

.a:hover .sub{overflow:hidden;height:200px;transtion:all 0.5s;}

但是,这并不是我想要的效果啊!我要的是高度自动!

利用max-height实现(效果有延时)

.a .sub{overflow:hidden;max-height:0;transtion:all 0.5s;}
.a:hover .sub{max-height:1000px;}

要求不高的话,可以用这种方法,也是比较简单的方法。


利用transform:translateY实现(效果接近完美,无延时,但要多一层DOM)

CSS代码

.a:hover .sub{transform: translateY(0);}
.a .sub{ transform: translateY(-100%); transition: all 0.5s;}
.a:hover .slide{max-height:1000px;}
.a .slide{position:absolute;top:100%;left:0;max-height:0;overflow: hidden;transition: all 0.5s;min-width:200px;}

HTML代码

<div class="a">
  hover
    <div class="slide">
        <div class="sub">
            第一排文字<br>
            第二排文字<br>
            第三排文字
        </div>   
    </div>
</div>

这样就可以实现我们要的效果!但是也并不完美哈,如果你要实现手风琴那样的效果,就不行了,如果你有更好的办法,就可以,没有的话,还是乖乖的用JS吧,哈哈。

实现效果和具体代码请到codepen里查看与测试


相关推荐
专题合辑