[英]max-height transition doesn't work and works slow
i'm having trouble animating a div expanding. 我在制作div扩展时遇到了麻烦。 My JQuery function does what it's supposed to, but the animation doesn't appear.
我的JQuery函数做了它应该做的事情,但动画没有出现。 I have tried both
transition : all
and transition : max-height
but none seems to work. 我尝试了两种
transition : all
和transition : max-height
但似乎没有工作。 Also something very weird happens, when i want to hide my div again. 当我想再次隐藏我的div时,也会发生一些非常奇怪的事情。 It appears that there's some kind og delay before it disappears.
它似乎在它消失之前有一些og延迟。 This delay matches the time of the animation, but i can't figure out what's wrong.
这个延迟与动画的时间相匹配,但我无法弄清楚出了什么问题。 Please help.
请帮忙。
Here's a fiddle: https://jsfiddle.net/vbqc2c27/1/ 这是一个小提琴: https : //jsfiddle.net/vbqc2c27/1/
You can't animate from a specific value (0px) to a relative value (100%). 您无法从特定值(0px)动画到相对值(100%)。 You need to use specific values:
您需要使用特定值:
$("p").on("click",function() {
if($("#test").css("max-height") == "0px") {
$("#test").css("max-height","100px");
}
else {
$("#test").css("max-height","0px");
}
});
Change "100%" to "100px" and it works fine. 将“100%”更改为“100px”,它工作正常。
Of course, for that paragraphs 100px isn't tall enough (the text is clipped). 当然,因为段落100px不够高(文本被剪裁)。 So you may need to add a function to calculate the auto-height in pixels.
因此,您可能需要添加一个函数来计算自动高度(以像素为单位)。
Or you can use slideToggle()
function which is much more simplier than that :) 或者你可以使用
slideToggle()
函数,它比那简单得多:)
JS JS
$("p").on("click",function() {
$("#test").slideToggle();
});
CSS CSS
div {
display: none;
}
Updated fiddle - simple solution without delay 更新小提琴 - 简单的解决方案,毫不拖延
Fix delay solution: 修复延迟解决方案
Put cubic-bezier(0, 1, 0, 1) transition function for element. 将cubic-bezier(0,1,0,1)转换函数放入元素。
.text {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
&.full {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.