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 */
}

它应该有用。

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

1 个答案: