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>使用动画的优点
以上是如何使用 Angular 2 的 ngIf 实现平滑的 CSS 转换？的详细内容。更多信息请关注PHP中文网其他相关文章！
