如何在角度2中为子组件设置动画？

Question

我试图在父组件上添加动画,所以当子组件: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%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
    ])
  ])]

})

然后我将动画选择器添加到模板中的子组件,如下所示:

<start *ngIf="currentPage == 'start'" @stepAnimation></start>
<about *ngIf="currentPage == 'about'" @stepAnimation></about>
<family *ngIf="currentPage == 'family'" @stepAnimation></family>

动画不起作用.然后我在每个组件中添加动画代码,并将@stepAnimation添加到每个模板的父标签中.这样,我得到了输入动画,但没有离开.我想这是因为父母的ngIf,但无论如何,有很多重复的动画代码.无论如何都会在父级别上处理动画吗？

Answer 1

问题是自定义元素 、<start>和<family>没有<about>样式，因此display默认为inline，无法翻译。只需将其添加到您的父样式表中：

about, start, family {
    display: block;
    /*Any other layout code, e.g. position:absolute */
}

它应该有效。