Ionic 2基于生命周期的动画

Question

我创建了一个基于选项卡的Ionic 2项目，并且我使用以下生命周期钩子来定义在给定页面加载时动画发生的触发器属性：

ionViewDidEnter() {
  this.state = 'active';
  console.log(this.state);
}
ionViewWillLeave() {
  this.state = 'inactive';
  console.log(this.state);
}

这就是组件装饰器中动画的样子：

animations: [
    trigger('focusPanel', [
        state('inactive', style({
            opacity: '0'
        })),
        state('active', style({
            transform: 'translateY(-80px)',
            opacity: '1'
        })),
        transition('* <=> active', animate('.5s ease-out'))
    ]),
]

这在应用加载时有效。我可以单击另一个选项卡然后返回，动画按预期工作。

但是，如果我第三次回去，虽然console.log准确且一致，但动画不再播放。它不会从0不透明度淡出，也不会基于translateY进行动画处理。

知道发生了什么事吗？我尝试了不同的生命周期钩子，以及上面动画中的不同transition（）属性。