可以使用 CSS 为动态高度设置动画吗？接受 JS 替代品答案

【问题标题】：Possible to animate dynamic height using CSS? JS alternatives accepted可以使用 CSS 为动态高度设置动画吗？接受 JS 替代品
【发布时间】：2016-11-06 01:59:40
【问题描述】：

我正在使用AngularJS，它允许我使用ng-show 和ng-hide 根据逻辑条件显示和隐藏元素。我想要完成的是在子对象显示隐藏时为容器的大小变化设置动画，这样它就不那么跳跃了。

对于那些不熟悉AngularJS、ng-show 和ng-hide 的人，基本上只是应用了display: none 和display: block 属性。因此，当容器设置为show 时，显示设置为block。

除此之外，我一直在通过谷歌搜索的几页阅读关于动画高度变化的内容，我所能找到的只是使用max-height 将其从一个高度设置为另一个高度的示例，这些是静态定义的通过 CSS 规则，例如：

#animated-div {
    max-height: 100px;
    transition: max-height 1s ease;
}

#animated-div.hidden {
    max-height: 0px;
}

他们会移除 .hidden 类以使过渡动画化高度变化。

问题是我没有打开/关闭容器，也没有预先确定容器的高度，因为容器可以根据各种变量动态修改。最重要的是，应用程序是响应式的，因此高度会因设备而异。

这是一个示例场景：

- Container
  - Div A (Height: 200px); Shown
  - Div B (Height: 100px); Shown
  - Div C (Height: 300px); Hidden
  - Div Slider (Height: Dynamic) Hidden.

目前容器的高度（即auto）是300px（基于子级），现在用户切换Div C 活动，这将高度增加到600px div 应该动画从@987654338 展开@ 现在用户点击了clear 按钮，容器的孩子都被隐藏了，容器应该从600px -> 0px 开始动画。

然后用户开始使用滑块，其值范围为0 to 100。此高度应用于Div Slider。假设用户滑动到 57。这应该会导致来自0px -> 57px 的动画，因为没有显示任何 div。

对于我想要的深入示例感到抱歉，但这是我能想到的解释它的唯一方法。作为参考，容器中的子项使用% 值和vw/vh 值动态缩放。当某个子元素组合处于活动状态时，容器的大小在不同分辨率下永远不会相同，因此这必须能够动画高度的动态变化。

欢迎使用 Javascript 示例，但是对于这个项目，我不希望涉及任何其他库，Javascript 示例必须适用于现代移动浏览器。

【问题讨论】：

标签： javascript css angularjs css-animations

【解决方案1】：

你的问题让我思考了一段时间，最后我想出了一个有趣的解决方案。

与其尝试为父元素设置动画，不如为新的子元素设置动画。

我已经创建了一个 codepen here 来做这件事。我正在为“显示”和“隐藏”效果使用 CSS 动画。

以下是主要动画的一点 LESS 代码：

.parent{
  width:33%;
  overflow:hidden;
  .child{
    padding:.5rem;
    border:1px solid #78909C;
    border-bottom:0;
    color:#fff;
    animation:slideDown .2s ease-in forwards; //set basic "show" animation
    transform-origin:top center; // set proper transform origin
    &.removed{
        animation:slideUp .2s ease-in forwards; // add different animation for "hide"
    }
    &:nth-child(even){background:#78909C;}
    &:nth-child(odd){background:#546E7A;}
    &:last-child{border-bottom:1px solid #78909C;}
  }
}

我不确定这是否能完美地解决您的问题，但它绝对可以帮助您。

【讨论】：