如何使用 Angular 2 的 ngIf 實現平滑的 CSS 轉換？

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>

使用動畫的優點

• 角度動畫可以精確控制過渡時間軸和緩動功能。
• 它們無縫處理進入和離開過渡。
• 可維護性和可讀性透過將轉換邏輯分離到單獨的元件中來改進 CSS 程式碼。

以上是如何使用 Angular 2 的 ngIf 實現平滑的 CSS 轉換？的詳細內容。更多資訊請關注PHP中文網其他相關文章！