CSS 缓入缓出不适用于最大高度 0 和最大高度自动
CSS ease-in ease-out not working for max-height 0 and max-height auto
我正在尝试像这样在我的一个 wordpress 页面上应用缓入和缓出:
.section1 {
max-height: 0px;
overflow: hidden;
transition: max-height 0.15s ease-out;
}
.section1.show {
max-height: auto;
overflow: visible;
transition: max-height 0.25s ease-in;
}
但是这不起作用,它不是缓入和缓出....我做错了什么?
我这样调整了我的代码:
.vc_section {
max-height: 0px;
overflow: hidden;
transition: max-height 1.15s ease-out !important;
}
.section1.show {
max-height: 500px;
overflow: visible;
transition: max-height 1.25s ease-in !important;
}
缓入有效,缓出无效。当用户单击按钮时,我正在尝试让 ease-out 工作:
$('.architectural-films').bind('click', function(){
if ($(".section1").hasClass("show")) {
$('.section1').removeClass('show');
}
else
{
$('.section1').addClass('show');
}
return false;
});
不幸的是,auto
值无法通过普通 CSS 动画化。
您可能需要 read this CSSTricks article 一些解决方法。
我会推荐使用 jQuery 的 slideDown()
和你想要的缓动:)
它工作正常,但由于 max-height
的值太大,您看不到您需要的效果。基本上 ease-in
会影响 500px
的值,但如果您的内容高度较小,您将看不到它。
这里有一个基本的例子可以更好地理解:
.box {
background:red;
height:20px;
width:100px;
display:inline-block;
vertical-align:top;
}
/*your code*/
.box {
max-height: 0px;
overflow: hidden;
transition: max-height 1.15s ease-out !important;
}
html:hover .box {
max-height: 100px;
overflow: visible;
transition: max-height 1.25s ease-in !important;
}
<div class="box">
</div>
<div class="box" style="height:100px;">
</div>
如您所见,第二个 ease 效果很好,因为它的高度足够大,可以看到与第一个不同的效果。
为避免这种情况,您需要为 max-height
使用较小的值(接近高度值)或使用 jQuery 手动设置此值并匹配元素高度。
我正在尝试像这样在我的一个 wordpress 页面上应用缓入和缓出:
.section1 {
max-height: 0px;
overflow: hidden;
transition: max-height 0.15s ease-out;
}
.section1.show {
max-height: auto;
overflow: visible;
transition: max-height 0.25s ease-in;
}
但是这不起作用,它不是缓入和缓出....我做错了什么?
我这样调整了我的代码:
.vc_section {
max-height: 0px;
overflow: hidden;
transition: max-height 1.15s ease-out !important;
}
.section1.show {
max-height: 500px;
overflow: visible;
transition: max-height 1.25s ease-in !important;
}
缓入有效,缓出无效。当用户单击按钮时,我正在尝试让 ease-out 工作:
$('.architectural-films').bind('click', function(){
if ($(".section1").hasClass("show")) {
$('.section1').removeClass('show');
}
else
{
$('.section1').addClass('show');
}
return false;
});
不幸的是,auto
值无法通过普通 CSS 动画化。
您可能需要 read this CSSTricks article 一些解决方法。
我会推荐使用 jQuery 的 slideDown()
和你想要的缓动:)
它工作正常,但由于 max-height
的值太大,您看不到您需要的效果。基本上 ease-in
会影响 500px
的值,但如果您的内容高度较小,您将看不到它。
这里有一个基本的例子可以更好地理解:
.box {
background:red;
height:20px;
width:100px;
display:inline-block;
vertical-align:top;
}
/*your code*/
.box {
max-height: 0px;
overflow: hidden;
transition: max-height 1.15s ease-out !important;
}
html:hover .box {
max-height: 100px;
overflow: visible;
transition: max-height 1.25s ease-in !important;
}
<div class="box">
</div>
<div class="box" style="height:100px;">
</div>
如您所见,第二个 ease 效果很好,因为它的高度足够大,可以看到与第一个不同的效果。
为避免这种情况,您需要为 max-height
使用较小的值(接近高度值)或使用 jQuery 手动设置此值并匹配元素高度。