web-dev-qa-db-ja.com

Angular Animations：Animate Parent and Child Elements

要素（div.parent）Angularアニメーションで効果がありました。それに子要素を追加し、同時に子をアニメーション化しようとすると、アニメーションの1つが実行されません（新しい状態にスナップするだけです）。

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)' ),
  ] ),
] ),
javascriptangularanimationangular-animations
10
Chris Voth

group()を使用しているため、query( ':self', ...を使用する必要がないようです。アニメーションは並行して実行されます。親アニメーションの遷移を変更できます。

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

更新されたStackBlitz

10
Michael Doye