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
}
像这种需求你可以用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/
