angular - 如何为 Angular 2 中的子组件设置动画？

Question

我尝试在父组件上添加动画，因此当子组件:enter 或:leave 时，会显示滑动效果。这是我的 parent @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 */
}

它应该可以工作。