另请参见https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc1-2017-02-24
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 class="note" [ngClass]="{'transition':show}" [hidden]="!show">
602392714
清零编程群