angular - 在项目更改时运行 Angular2 动画

Question

我有以下代码：

<item-detail [item]="selectedItem"[@flyInOut]="'in'"></item-detail>

每当 selectedItem 发生变化时，我想在项目之间进行平滑过渡。

我决定从文档中尝试这个：

animations: [
  trigger('flyInOut', [
    state('in', style({transform: 'translateX(0)'})),
    transition('void => *', [
      style({transform: 'translateX(-100%)'}),
      animate(100)
    ]),
    transition('* => void', [
      animate(100, style({transform: 'translateX(100%)'}))
    ])
  ])
]

但不幸的是，动画不会触发，似乎该项目没有从视图中删除（无效），但只会发生变化。

有没有办法设置动画在项目更改时触发？