如果有一个需求要点击实现JQ的slideUp效果,不能要用到JQ,使用原生的JS,那你肯定想到的就是,通过点击给元素添加另外的样式 height 加高,或者减少,但是很明显,这个效果并不是很好,反而会很死板,没有动画的效果,像是实现了折叠面板的意思,但我们并不需要这个,有动画才好看!所以你肯定想到用 css3 的 transition 属性添加动画,这就对了!
完成了需求(有点偏题),但这次说的不是你用 JS 多6,用label 也能实现动画slideUP,不需要JS 岂不是很酷?!
看下面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Document</title>
<style type="text/css">
.box {
margin-top: 20px;
-webkit-transition: height 0.3s;
transition: height 0.3s;
}
/*.nav__input{
display: none
}*/
.nav__input:checked ~ .box {
height: 500px;
-webkit-transition: height 0.3s;
transition: height 0.3s;
}
.label{
border-radius: 5px;
background: #ddd
}
.box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="checkbox" class="nav__input" id="nav_input">
<label class="label" for="nav_input">点我一下试试~</label>
<div class="box"></div>
</body>
</html>
猛戳这里