Lifecycle-based animations not working correctly


#1

I created a tab-based Ionic 2 project and I’m using the following lifecycle hooks to define a trigger property for animations to occur when a given page loads:

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

This is what the animations looks like in the component decorator:

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

This works when the app loads. I can click on a different tab and go back, and the animation works as expected.

However, if I go back a third time, while the console.log is accurate and consistent, the animations no longer play. It doesn’t fade from 0 opacity, and it does not animate up based on translateY.

I have 3 tabs. If I choose tab 2 or 3, and go back to 1 (which has the animations), the first time it works. If I go back to 2 or 3 anymore, they do not work.

Any ideas?


#2

Just to respond to this, if I switched to a sidemenu-based project, it works fine. So this must just be isolated to tabs.