如何使用 Angular 2 的 ngIf 實現平滑的 CSS 轉換？-css教學-PHP中文網

如何使用 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，另一種方法是使用隱藏屬性。

程式碼範例

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

登入後複製

或者，使用Angular 4.1.0 及更高版本

角度

角度動畫提供了一種優雅的方式來處理此類轉換。

程式碼範例

<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>

登入後複製

使用動畫的優點