web-dev-qa-db-ja.com

Angular。最初のレンダリングでアニメーションの入力をスキップする方法はありますか？

:enterアニメーションは、コンポーネントが最初にレンダリングされるときに要素に適用されます。それを防ぐ方法はありますか？

widthアニメーションの簡単な例については、 このプランカー を確認してください。

transition(':enter', [
  style({width: 0}),
  animate(250, style({width: '*'})),
]),
angularangular2-animation
21
Sergey Sokolov

空の:enterアニメーションをビューの親に追加するだけです。この場合、最初の子:enterアニメーションは無効になりますが、それ以降のアニメーションは機能します。

テンプレート：

<div @parent>
    <div @child>test</div>
</dif>

アニメーション：

trigger('parent', [
    transition(':enter', [])
])
trigger('child', [
    transition(':enter', [
      style({width: 0}),
      animate(250, style({width: '*'})),
    ]),
])

ここ より詳細な説明があります。

12
Valeriy Katkov

そのための void 状態があります。これは基本的にnull状態を表します。

実際には、次のようになります。

trigger('myState', [
  state('previous', style({ transform: 'translateX(-100%)' })),
  state('current', style({ transform: 'translateX(0)' })),
  state('next', style({ transform: 'translateX(100%)' })),
  transition('void => *', animate(0)), // <-- This is the relevant bit
  transition('* => *', animate('250ms ease-in-out'))
])

これが意味するのは、要素にまだ状態がなく、any状態に遷移するときはいつでも、そうすべきではないということです。アニメートします。

したがって、あなたの場合、次のように書くことができます。

transition('void => :enter', animate(0))

それが理にかなっていることを願っています。

2
D. Visser