首页 文章

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

提问于
浏览 次
5

我试图在父组件上添加动画，所以当子组件：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，但无论如何，有很多重复的动画代码 . 无论如何都会在父级别上处理动画吗？

angular typescript animation

1 回答

  • 4

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

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

    它应该工作 .

    回复于

相关问题