angular - ngFor的Angular 2动画触发器（状态“in”）

Question

我正在尝试使用 ngFor 在输入/输出吐司消息上创建动画。

当新的 Toast 出现时，动画还可以，但是如果我单击关闭其中一个，所有的 Toast 消息都会从 DOM 中删除，但仍在模型中，当新的 Toast 出现时，它们不会出现在 DOM 中。

在我看来，我有：

    <div *ngFor="let message of messages; let idx = index;" class="toast"
         @flyInOut="'in'"
         (click)="closeToast($event, idx)">
        <div class="text {{message.type}}">{{message.text}}</div>
    </div>

这是组件中的动画定义：

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

如何将触发动画与模型关联？（使用 ng2 - rc3）