Question

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

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

看起来像动画：输入和：离开对组件选择器不起作用示例：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

角度4：动画组件选择器

1 个答案: