角度动画：动画父元素和子元素 [英] Angular Animations: Animate Parent and Child Elements

问题描述

我用一个效果很好的Angular动画创建了一个元素（ div.parent ）。当我向其中添加一个child元素并尝试对其进行动画处理时，其中一个动画最终不会运行（只是捕捉到新状态）。

I created an element (div.parent) with an Angular animation that worked great. When I add a child element to it and try to animate the child at the same time, one of the animations doesn't end up running (it just snaps to the new state).

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

标记：

<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)' ),
  ] ),
] ),

推荐答案

似乎您不需要使用 query（'：self'，... ，因为您正在使用 group（）动画将并行运行。您可以在其中更改转场r父级动画：

It looks like you don't need to use query( ':self', ... since you are using group() animations will run in parallel. You can change the transition in your parent animation:

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

更新后的StackBlitz

这篇关于角度动画：动画父元素和子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！