更新4.1.0
柱塞
另请参见https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc1-2017-02-24
更新2.1.0
柱塞
有关更多详细信息，请参见 angular.io的动画。
import { trigger, style, animate, transition } from '@angular/animations';@Component({ selector: 'my-app', 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;}原版的
*ngIf当表达式变为时，从DOM中删除元素
false。您不能在不存在的元素上进行过渡。
改为使用
hidden：
<div [ngClass]="{'transition':show}" [hidden]="!show">
