由于内容高度不同,我正在使用过渡最大高度而不是高度的技术,但我遇到了问题。
在增长或收缩的元素内,我有一个溢出的绝对定位元素,我想在父元素展开时显示该元素。
问题是如果我只在元素没有展开的时候设置overflow hidden,它会因为transition而跳转。这是一支笔,您可以看到它在跳跃:
https://codepen.io/nicopavlotsky/pen/pozLBxY
使用此代码:
div{
transition: all .5s;
overflow: hidden;
}
div.active{
overflow: visible;
max-height: 10rem;
}
这是另一个没有跳转但子元素被剪掉的例子:
https://codepen.io/nicopavlotsky/pen/yLBKrGW
div{
transition: all .5s;
overflow: hidden;
}
div.active{
max-height: 10rem;
}
有没有 JS 更少的方法来做到这一点?
最佳答案
另一种可能提供所需结果的方法是按如下方式transform: scaleY()
。
div {
transform-origin: top;
transform: scaleY(0);
}
div.active {
transform: scaleY(1);
}
这是一个例子:
document.querySelector('button').addEventListener('click', function() {
document.querySelector('div').classList.toggle('active');
});
div {
width: 200px;
border: 2px solid red;
transform-origin: top;
transform: scaleY(0);
transition: all .5s;
position: relative;
}
div.active {
transform: scaleY(1);
}
span {
display: block;
position: absolute;
bottom: 3rem;
right: -1rem;
width: 2rem;
border: 2px solid blue;
height: 2rem;
}
<button>Toggle</button>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At porro veniam a iste deleniti possimus aliquam minima libero est blanditiis eligendi aut, eaque, quam sunt ducimus amet qui, quo aperiam!
</p>
<span></span>
</div>
关于javascript - 隐藏最大高度溢出的 CSS 过渡 "simulate"过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57877853/