javascript – 从显示屏向下滑动动画:无显示:阻止?
作者:互联网
有没有办法动画显示:无显示:阻止使用CSS,以便隐藏的div滑下而不是突然出现,或者我应该采取不同的方式?
HTML:
<div id="box">
Initial Content
<div class="hidden">
This is hidden content
</div>
</div>
CSS:
#box {
height:auto;
background:#000;
color:#fff;
cursor:pointer;
}
.hidden {
height:200px;
display:none;
}
.hidden.open {
display:block;
}
这是我的脚本:
$(document).ready(function() {
$('#box').click(function() {
$(this).find(".hidden").toggleClass('open');
});
});
一个JSFiddle
解决方法:
是的,有一种方法:
http://jsfiddle.net/6C42Q/12/
通过使用CSS3过渡,并操纵高度,而不是显示属性:
.hidden {
height: 0px;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
}
.hidden.open {
height: 200px;
-webkit-transition: height 0.5s linear;
-moz-transition: height 0.5s linear;
-ms-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
}
更多这里:Slide down div on click Pure CSS?
标签:html,javascript,jquery,css,css-transitions 来源: https://codeday.me/bug/20191004/1853334.html