web-dev-qa-db-ja.com

アニメーション化方法：入力してください。

私はリストがある場所にあります。このようなアニメーションがあります。

_<li @animation>
_

そしてこれは私のアニメーショントリガーです：

_trigger('animation', [
  transition(':enter', [
    style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0'}),  // initial
    animate('0.5s',
      style({ height: '*', 'padding-top': '*', 'padding-bottom': '*'}))  // final
  ]),
  transition(':leave', [
    style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', opacity: 1}),  // initial
    animate('0.5s',
      style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0', opacity: 0}))  // final
  ])
])
_

特定のアイテムのためにこのアニメーションを条件付きで/オフにするにはどうすればよいですか？実際にはsthを探します。このような：

_<li [@animation]=item.isAnimated>
_

これはまったく機能しません。

そして残念ながらAngularドキュメントはこれについての文を持っています：

ページを入力または終了する要素（DOMから挿入または削除された）には、アニメーションを条件付きで作成できます。たとえば、HTMLテンプレートのアニメーショントリガーで* NGIFを使用します。

しかし、アニメーション注釈を* NGIFと組み合わせると、アニメーション化されていないアイテムは明らかに全く表示されません。

_<li *ngIf="item.isAnimated" @animation>
_

ISANIMETフラグに関係なく、すべての項目をさらに表示したいです。特定の項目のアニメーションをオン/オフにしたいだけです。

angularangular-animations
5
akcasoy

によると 角IO ：

TRUEの場合、特別なアニメーション制御バインディング@ .disabledバインディングは、すべてのアニメーションのレンダリングを防ぎます。要素自体のアニメーションを無効にするために要素に@ .disabledバインディング、および要素内の任意の内部アニメーショントリガーを配置します。

次の例は、この機能を使用する方法を示しています。

@Component({
    selector: 'my-component',
    template: `
    <div [@.disabled]="isDisabled">
        <div [@childAnimation]="exp"></div>
    </div>
    `,
    animations: [
        trigger("childAnimation", [
            // ...
        ])
    ]
})
class MyComponent {
      isDisabled = true;
  exp = '...';
}
 _

@ .disabledがtrueの場合、@ChildAnimationトリガーがインナーアニメーションと一緒にアニメートするのを防ぎます。

4
j4rey

が明確にするには： angulars ：ENTER および：残りキーワードは、ある場合はコンポーネントをアニメートすることです。 - またはの入り口 DOM。シンプルに聞こえますが、それはあなたのアプローチとあなたが達成しようとする目的の問題です。アニメーションの代わりに.

アプローチは次のとおりです。

@Component({
  animations: [
    trigger('animation', [
      state('invisible', style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0'}),
      state('visible', style({ height: '*', 'padding-top': '*', 'padding-bottom': '*'})
      transition('invisible => visible', animate('0.5s'))
      transition('visible => invisible', animate('0.5s'))
    ])
  ],
})

private readonly isAnimated: boolean = false/true //Where ever you get this value.
public animationState: string //Or Enum with visible/invisible.

public ngOnInit(): void {
  if (this.isAnimated) {
    animationState = 'visible'
  }
}

public ngOnDestroy(): void {
  if (this.isAnimated && this.animationState === 'visible') {
    animationState = 'invisible'
  }
}
 _
<li [@animation]="animationState"/>
 _

このアプローチの問題や問題がある場合 - 私に知らせて、調整して議論することができます。

1
Jonathan Stellwag