javascript - 如何在 Angular 中设置未知高度的动画？

Question

我有一个代码，看起来像这样:

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

当前的实现看起来像这样(它是 Stylus 格式的 CSS)，应该看起来像向下滑动的效果:

$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-leave
    animation-name fadeOutQuick
    animation-timing-function ease-in

@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

此代码有效，但到目前为止动画质量非常好。该问题与 CSS 中 height: auto 缺少动画有关。我正在使用 AngularJS 1.5 并注入(inject)了 ngAnimate。我可以固定图像的高度，但不能更改或剪切文本。

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

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

Answer 1

我相信大多数动画打开/关闭的“可折叠”元素都会遇到同样的问题。

他们的做法是添加两个额外的状态，用于动画的长度。 IE。 .my 将变为 .my.animatingIn 100ms，然后更改为 .my.animatedIn。 animatingIn 类动画到固定高度..比如 100px.. 然后 animatedIn 类将它设置为自动。这给人一种盒子膨胀的错觉，而实际上它有点动画......然后捕捉。

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

For example, if you have an animation named animate, during the ngRepeat enter phase, the Angular will attach the class "animate-enter" and them the class "animate-enter-active". Docs

因此，您应该使用类似的东西看到这个工作

$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>

这将使您可以将当前类名更改为类似 animate-quick-enter 的名称，这样您仍然可以访问默认值