Angular 2 の ngIf を使用してスムーズな CSS 遷移を実現するにはどうすればよいですか?

Angular 2 ngIf と CSS 遷移/アニメーション: 遷移の問題の解決

ngIf では、一般的に課題に遭遇しますディレクティブによって制御される要素で CSS トランジションを試みるとき。 ngIf は、条件が false になると DOM から要素を削除し、トランジションを適用する機能を妨げます。

元の問題

を使用する場合ngIf で CSS トランジションを使用すると、要素は最初は非表示になり、トランジションは機能しません。

解決策

ngIf は要素を削除するため、 DOM の場合、代わりに hidden 属性を使用する方法もあります。

コード サンプル

<code class="html"><div class="note" [ngClass]="{'transition':show}" [hidden]="!show">
    <p> Notes</p>
</div></code>

Angular 4.1.0 以降

Angular アニメーションは、このような遷移を処理するエレガントな方法を提供します。

コード サンプル

<code class="typescript">import { trigger, style, animate, transition } from '@angular/animations';

@Component({
    animations: [
        trigger(
            'enterAnimation', [
                transition(':enter', [
                    style({transform: 'translateX(100%)', opacity: 0}),
                    animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
                ]),
                transition(':leave', [
                    style({transform: 'translateX(0)', opacity: 1}),
                    animate('500ms', style({transform: 'translateX(100%)', opacity: 0}))
                ])
            ]
        )
    ],
    template: `
        <button (click)="show = !show">toggle show ({{show}})</button>

        <div *ngIf="show" [@enterAnimation]>xxx</div>
    `
})
export class App {
    show: boolean = false;
}</code>

アニメーションを使用する利点

• Angular アニメーションにより、トランジション タイムラインとイージング関数を正確に制御できます。
• トランジションの開始と終了の両方をシームレスに処理します。
• 保守性と可読性CSS コードは、遷移ロジックを別のコンポーネントに分離することで改善されました。

以上がAngular 2 の ngIf を使用してスムーズな CSS 遷移を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。