有一个关于CSS3动画的问题,它们不支持“auto”高度属性(以及宽度、边距等)。在不知道元素确切高度的情况下,创建CSS3向下滑动动画的最佳方法是什么?
这个问题类似于这个,但那里被接受的答案没有回答实际问题,因为它们没有解决计算要滑动的元素高度的问题。
这个问题类似于这个,但那里被接受的答案没有回答实际问题,因为它们没有解决计算要滑动的元素高度的问题。
你看过我在那个答案中找到的演示吗?
我试着写了一个,但好像不起作用。
$('#click-me').click(function() {
var height = $("#this").height();
if (height > 0) {
$('#this').css('height', '0');
} else {
$("#this").css({
'position': 'absolute',
'visibility': 'hidden',
'height': 'auto'
});
var newHeight = $("#this").height();
$("#this").css({
'position': 'static',
'visibility': 'visible',
'height': '0'
});
$('#this').css('height', newHeight + 'px');
}
});
#this {
width: 500px;
height: 0;
max-height: 9999px;
overflow: hidden;
background: #BBBBBB;
-webkit-transition: height 1s ease-in-out;
}
#click-me {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<p id="click-me">click me</p>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
<div>always shows</div>
slideDown
只是animate({height: 'toggle'});
的简写。 - Blender您可以通过复制元素,将其高度设置为“auto”,并询问其像素高度来了解元素的高度。
假设这是您想要进行动画处理的 div:<div id="mydiv" style="height:0px">
,使用以下代码来确定其高度(仅使用 jQuery 简化代码):
var divHeight = $("#mydiv").clone().css("height", "auto").height();
.slide-down {
transition: max-height .3s ease-out, opacity .3s ease-out, margin .3s ease-out;
overflow: hidden;
max-height: 100px;
&.collapsed {
max-height: 0;
opacity: 0;
margin: 0;
}
}
$('.slide-down').toggleClass('collapsed')
。cubic-bezier(0.17, 0.04, 0.03, 0.94)
而不是ease-out
。看这个:http://jsfiddle.net/gion_13/eNR6Q/ 这只是 CSS3 动画,在其他浏览器中使用时,请添加/更改各自的浏览器前缀:" -moz" 适用于 Firefox," -webkit" 适用于 Chrome&Safari," -o " 适用于 Opera 和 " -ms" 适用于 IE。