如何使用 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中文网其他相关文章！