Javascript 如何在角度方向上设置未知高度的动画？

我有一个代码，如下所示：

<div ng-repeat="row in rows" class="my">
  <img ng-src="{{row.pictureUrl}}">
  {{row.text}}
</div>

这段代码可以工作，但到目前为止动画的质量还不错。 该问题与CSS中缺少

height:auto

动画有关。 我用的是AngularJS 1.5，注射了尼莫。 我可以固定图像的高度，但不能更改或剪切文本

如何使行动画更好？有可能吗

---

更新：尝试过这个，看起来真的很难看，有一段时间页面仍然是空的，在内容出现之后。此外，这种压缩效果看起来并不吸引人。

如果您大致知道元素的高度应该是多少，则可以设置动画或变换

最大高度


div{
最大高度：50px；
宽度：100px；
溢出：隐藏；
动画：高度。向前5秒；
动画延迟：1s；
}
@关键帧高度{
到{
最大高度：200px；
}
}

asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asd asdf asd asdf asd asd asd asd asd asdf asdf

我相信大多数可折叠的元素都会遇到同样的问题，这些元素会为打开/关闭设置动画

它们的方式是，它们添加两个额外的状态，应用于动画的长度。例如，
.my
将成为
.my.animatingIn
的
100ms
，然后更改为
.my.animatedIn
。类中的
动画设置为固定高度。。比如说100像素。。然后，
animatedIn
类将其设置为自动。这给人一种盒子膨胀的错觉，而实际上它有点动画化。。然后啪的一声

幸运的是，angular为
ng animate
提供了这种开箱即用的设置。使用动画的名称，然后使用
-active
版本

例如，如果您有一个名为animate的动画，则在ngRepeat enter阶段，Angular将附加类“animate enter”，并附加类“animate enter active”

因此，您应该看到它使用以下内容工作

$slowAnimationDuration = 100ms
.my
&.ng-animate
    transition:all
    animation-iteration-count 1
    animation-duration $slowAnimationDuration
&.ng-enter
    animation-name fadeInQuick
    animation-timing-function ease-out
&.ng-enter-active
    height auto
&.ng-leave
    animation-name fadeOutQuick
    animation-timing-function ease-in
&.ng-leave-active
    height 0

@keyframes fadeInQuick 
  0% 
    height 0
    opacity  0
  20%
    height calc(0.5em + 1vh + 1px)
  50%
    opacity 0.05
  100%
    height calc(1em + 2vh + 2px)
    opacity 1

@keyframes fadeOutQuick
  0%
    height calc(1em + 2vh + 2px)
    opacity 1
  100%
    height 0
    opacity 0

通过更新html以包含
ng animate
属性，您还可以从指定动画的行为方式中获益

<div ng-repeat="row in rows" class="my" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
  <img ng-src="{{row.pictureUrl}}">
  {{row.text}}
</div>


{{row.text}

此事件允许您将当前类名更改为类似
动画快速输入
的内容，这样您仍然可以访问默认值
我看到了此技巧，但我更喜欢此技巧，除了动画过程中的内容压缩。
<div ng-repeat="row in rows" class="my" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
  <img ng-src="{{row.pictureUrl}}">
  {{row.text}}
</div>