javascript - 可以使用 CSS 制作动态高度动画吗？接受 JS 替代方案

Question

我正在使用 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 应该以动画方式从 300px -> 600px 展开，现在用户单击了 clear 按钮，容器的子项全部隐藏，容器应该从 600px -> 0px 开始动画。

然后，用户开始摆弄 slider ，其值范围为 0 到 100。此高度应用于 Div Slider。假设用户滑动到 57。这应该会导致从 0px -> 57px 产生动画，因为没有显示任何 div。

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

欢迎使用 Javascript 示例，但是对于这个元素，我不希望涉及任何其他库，Javascript 示例必须在现代移动浏览器上运行。

Answer 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;}
  }
}

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