Angular动画：如何为父元素和子元素添加动画效果

Question

我使用Angular动画创建了一个元素（div.parent），它的运行效果非常好。但是当我给它添加一个子元素并尝试同时对子元素进行动画时，其中一个动画就无法正常运行（只会瞬间切换到新的状态）。

Stackblitz: https://stackblitz.com/edit/angular-2tbwu8

Markup:

<div [@theParentAnimation]="state" class="parent">
  <div [@theChildAnimation]="state" class="child">
  </div>
</div>

动画:

trigger( 'theParentAnimation', [
  state( 'down', style( {
    transform: 'translateY( 100% ) translateZ( 0 )',
  } ) ),
  transition( '* <=> *', [
    group( [
      query( ':self', [
        animate( '0.9s cubic-bezier(0.55, 0.31, 0.15, 0.93)' ),
      ] ),
      query( '@theChildAnimation', animateChild() ),
    ] ),
  ] ),
] ),
trigger( 'theChildAnimation', [
  state( 'down', style( {
    transform: 'translateY( 100% ) translateZ( 0 )',
  } ) ),
  transition( '* <=> *', [
    animate( '0.9s cubic-bezier(0.55, 0.31, 0.15, 0.93)' ),
  ] ),
] ),

- Chris Voth

Answer 1

看起来你不需要使用 query( ':self', ... 因为你正在使用 group() 动画将并行运行。你可以更改父级动画中的过渡效果：

transition('* <=> *', [
  group([
    query('@theChildAnimation', animateChild()),
    animate('0.9s cubic-bezier(0.55, 0.31, 0.15, 0.93)'),
  ]),
]),

更新后的 StackBlitz

- Michael Doye

---

我有类似的问题，我也尝试使用子动画，但它没有起作用。 https://stackoverflow.com/questions/63497254/when-i-use-same-angular-animation-on-child-element-it-doesnt-work - indrajeet

谢谢！这个答案帮助我学会了如何使用animateChild()。说文档缺乏足够的解释是轻描淡写了。 - ModusPwnens