有没有一种方法可以使用CSS将display:none动画化为display:block,这样隐藏的div就可以向下滑动而不是突然出现,或者我应该用另一种方法来实现这一点?
$(document).ready(function() {
$('#box').click(function() {
$(this).find(".hidden").toggleClass('open');
});
});
#box {
height:auto;
background:#000;
color:#fff;
cursor:pointer;
}
.hidden {
height:200px;
display:none;
}
.hidden.open {
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
Initial Content
<div class="hidden">
This is hidden content
</div>
</div>
7条答案
按热度按时间3phpmpom1#
是的,有一个方法:http://jsfiddle.net/6C42Q/12/
通过使用CSS3过渡,并操纵高度,而不是显示属性:
更多信息:Slide down div on click Pure CSS?
uhry853o2#
既然你已经在使用jQuery了,那么最简单的方法就是使用slideDown()。http://api.jquery.com/slidedown/
还有slideToggle()。
这样你就不需要手动做所有特定于浏览器的转换css了。
n3schb8v3#
我喜欢CSS过渡的想法,但它仍然非常跳跃。有时候最大高度必须设置为一个非常大的数字,因为动态内容会使过渡变得无用,因为它非常跳跃。所以,我回到jQuery,但它有自己的缺点。内联元素是跳跃的。
我发现这对我很有效:
停止停止所有先前的转换。css确保它被当作一个块元素,即使它不是。hide隐藏了那个元素,但是jquery会将它作为一个block元素记住。最后,slideDown通过向下滑动来显示元素。
k97glaaz4#
我们可以使用
visibility: hidden
到visibility: visible
而不是display: none
到display: block
属性。使用max-height
而不是hight
应该保持元素具有自动高度。请看这个例子:
bvk5enib5#
呢
$("#yourdiv").animate({height: 'toggle'})
;Toggle将打开/关闭你的div,动画应该让它从下面出现。在这种情况下,您不需要特定的CSS来“隐藏”它。
yqlxgs2m6#
我在我的React站点中为导航头做了这个解决方案。
这是常规的可见css类
这是附加到div的类(在我的例子中滚动时)
nxagd54h7#
您也可以使用
或者你可以告诉活动的div上升,然后被调用的div下降
差不多吧