角度 4：动画组件选择器

Question

我在我的应用程序中使用选项卡，其内容使用 *ngIf 显示。

我想为这些内容的进入和退出设置动画。示例：plunker

似乎动画 :enter 和 :leave 在组件选择器上不起作用 示例：plunker

  template: `
<div>
  <h2>Hello {{name}}</h2>
  <button (click)="show = !show">togle show ({{show}})</button>
  <my-child *ngIf="show" [@myAnimation]></my-child>
</div>
 `,


trigger(
  'myAnimation',
  [
    transition(
    ':enter', [
      style({transform: 'translateX(100%)', opacity: 0}),
      animate('500ms', style({transform: 'translateX(0)', 'opacity': 1}))
    ]
  ),
  transition(
    ':leave', [
      style({transform: 'translateX(0)', 'opacity': 1}),
      animate('500ms', style({transform: 'translateX(100%)', 'opacity': 0}),

    ]
  )]
)

我尝试将动画移动到子组件，但在那里，ngIF 在动画发生之前删除了元素。

Answer 1

对于您要实现的目标而言，代码有点过多。您可以使用state 定义enter 和leave 状态（* 和void）。并在它们之间制作动画。

问题也可能是您使用 [@myAnimation] 时没有分配。如果你不将它绑定到任何东西，你应该/可以删除括号，但不确定这一点。试试这个：

@Component({
    template: `<my-child *ngIf="show" @myAnimation></my-child>`,
    animations: [
      trigger('myAnimation', [
        state('void', style({transform: 'translateX(100%)', opacity: 0})),
        state('*', style({transform: 'translateX(0)', opacity: 1})),
        transition(':enter, :leave', animate(500))
      ])
    ]
})

plunkr