角度2 ngIf和CSS过渡动画

角度2 ngIf和CSS过渡/动画

更新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">