像这种需求你可以用js或者jQuery编写。
如果不想使用js或者jquery，那么用css的过渡属性代码如下：
鼠标滑入，出现效果
transition: right .7s ease
right为过渡的属性，可以是宽高，top/lelft/right/bottom/opacity等等。只要记住transition不能过渡display就行。
.7s 为过渡所需要的时间，ease为过渡的样式，是匀速过渡还是先快后慢等等。
如果没有鼠标事件，那么就需要用到css3的动画，animation。css3的动画详情卡查看https://mengkedu.com/
1,请看代码。2,<div style="height: 200pxwidth: 200pxborder: 1px solid #ccc">
<div class="slider" id="slider">这里是内容</div>
</div>
<button onclick="document.getElementById('slider').classList.toggle('closed')">点击看看</button>
CSS代码
CSS Code复制内容到剪贴板
.slider {
overflow-y: hidden
max-height: 500px
/* 最大高度 */
background: pink
height: 200px
width: 200px
/* Webkit内核浏览器：Safari and Chrome*/
-webkit-transition-property: all
-webkit-transition-duration: .5s
-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1)
/* Mozilla内核浏览器：firefox3.5+*/
-moz-transition-property: all
-moz-transition-duration: .5s
-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1)
/* Opera*/
-o-transition-property: all
-o-transition-duration: .5s
-o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1)
/* IE9*/
-ms-transition-property: all
-ms-transition-duration: .5s
-ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1)
}
.slider.closed {
max-height: 0
}
<!DOCTYPE html><html>
<head>
<style>
div
{
width:100px
height:100px
background:red
position:absolute
animation:myfirst 5s
-webkit-animation:myfirst 5s
animation-fill-mode: forwards
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red left:500px bottom:50px}
25% {background:red left:500pxheight:130pxbottom:50px}
50% {background:red left:500px height:160pxbottom:50px}
75% {background:red left:500pxheight:190px bottom:50px}
100% {background:red left:500px height:210pxbottom:50px}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这只是个演示的demo，方法就是这样，animation-fill-mode: forwards这一句给你解释下，这句就是当动画完成时，动画会停留在最后一帧。其他代码都比较简单，不懂随时问我。
希望能够帮助到你，望采纳！
