我试图在父组件上添加动画,所以当子组件：enter或：leave时,会显示滑动效果.这是我的父亲@component：
@component({
selector: 'plan',templateUrl: '../templates/plan.tpl.html',styleUrls: ['../../../../assets/css/plan.scss'],animations: [
trigger('stepAnimation',[
transition(':enter',[
style({transform: 'translateX(100%)'}),animate('0.5s ease-in-out',style({transform: 'translateX(0%)'}))
]),transition(':leave',[ // before 2.1: transition('* => void',[
style({transform: 'translateX(0%)'}),style({transform: 'translateX(-100%)'}))
])
])]
})
然后我将动画选择器添加到模板中的子组件,如下所示：
<start *ngIf="currentPage == 'start'" @stepAnimation></start> <about *ngIf="currentPage == 'about'" @stepAnimation></about> <family *ngIf="currentPage == 'family'" @stepAnimation></family>
动画不起作用.然后我在每个组件中添加动画代码,并将@stepAnimation添加到每个模板的父标签中.这样,我得到了输入动画,但没有离开.我想这是因为父母的ngIf,但无论如何,有很多重复的动画代码.无论如何都会在父级别上处理动画吗？
