Question

进行SlideUp转换的常用方法如下：

.cssSlideUp {
    transition: .5s linear all;
    height: 80px;
    overflow: hidden;
}
.cssSlideUp.hide {
    height:0;
}

此方法要求元素具有固定高度（80px）。

什么方法可以让我具有相同的效果，但具有灵活的高度？

更新

这有效，但我仍然不满意。 max-height:400px属性仍然固定指定数字的高度，而max-height:9999px使其“无限”将使转换无法察觉：

.cssSlideUp {
    transition: .5s linear all;
    height: auto;
    max-height: 400px;
    overflow: hidden;
}
.cssSlideUp.ng-hide {
    max-height: 0px;
}

更新2：

缩放变换效果很好，但我仍然不满意，因为它不会推/拉下面的元素：

.cssSlideUp {
    transition: .5s linear all;
    transform: scaleY(1);
    transform-origin: top;
    overflow: hidden;
}
.cssSlideUp.ng-hide {
    transform: scaleY(0);
}

Answer 1

除了已经引用的实现之外，您还可以使用负顶部边距与容器相结合。然而，它受到边距限制宽度而不是高度的问题，导致动画不精确和其他隐含的复杂性。
示例实现如下：Jsfiddle sample

HTML：

<h1>Previous content</h1>
<p>This is content before the animation.</p>

<div class="container">
    <div class="scroll">
        <h1>Hover anywhere to scroll up</h1>
        <p>We have some content here.</p>
        <p>But no one can be quite sure just how large this content is.</p>
    </div>
</div>

<h1>Later content</h1>
<p>This is content after the animation.</p>

CSS：

.container {
    overflow: hidden;
    position: relative;
}

.scroll {
    transition: .5s linear all;
}

body:hover .scroll {
    margin-top: -100%;   
}

Answer 2

不幸的是，目前没有JavaScript。过渡需要一个已知的起点和终点。

使用JS，您无法检查未显示的元素的高度，因为未显示的元素没有布局。您需要克隆或定位想要离开屏幕高度的元素。

jQuery Actual使用此技术。

通过设置目标元素的max-height并转换那个但是很脆弱，可以轻微地盗用CSS。

CSS弹性高度“slideUp”过渡

更新

更新2：

2 个答案: