Angular 2 の ngIf を使用してスムーズな CSS 遷移を実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-10-27 16:12:01

オリジナル

968 人が閲覧しました

How to Achieve Smooth CSS Transitions with Angular 2's ngIf?

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>

ログイン後にコピー

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