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并注入了ngAnimate。我可以修复图像的高度，但我无法更改或剪切文本。

如何使行动画效果更好？它甚至可能吗？

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

Answer 1

如果您大致了解元素的高度，您可以设置动画或转换max-height。

div {
  max-height: 50px;
  width: 100px;
  overflow: hidden;
  animation: height .5s forwards;
  animation-delay: 1s;
}

@keyframes height {
  to {
    max-height: 200px;
  }
}

<div>
  <p>asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asd fasdf asdf asdf asd fasd fasdf asdf asdf asdf asdf</p>
</div>

Answer 2

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

他们的方式是，他们添加两个额外的状态，应用于动画的长度。即。对于.my，.my.animatingIn将变为100ms，然后更改为.my.animatedIn。 animatingIn类动画到固定高度..比如说100px ..然后animatedIn类将它设置为auto。这给了盒子扩展的错觉，实际上它的动画有点......然后是对齐。

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

例如，如果您有一个名为animate的动画，则在ngRepeat输入阶段，Angular将附加“animate-enter”类，并将它们添加为“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，这样您仍然可以保留对默认值的访问权

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

2 个答案: