Angular animation fires incorrectly when going 'back' one view via pop() or back button

Hello all, I’ve been trying to debug this without success for hours and hope someone can provide some insight.

Description of issue:

I have an Angular2 animation on a component, so once data is loaded via an API request, the animation fires and transitions the elements in. This works fine on first load, and if I manually navigate to this page. However, if I push a subpage from this, then return to the parent page using pop() or the back button, the animation fires incorrectly i.e. as if it’s trying to fire twice (?). It only seems to occur on the first ‘back’ from the sub-page, i.e. if I visit the sub-page again then go back, the issue does not recur.

Gif of the transition issue is here:

My animations code:

animations: [
trigger('fadeIn', [
  transition(':enter', [
    style({ transform: 'translateY(2rem)', opacity: 0 }),
    animate('0.3s ease', style({ transform: 'translateY(0)', opacity: 1 }))
  transition(':leave', [
    style({ transform: 'translateY(0)', opacity: 1 }),
    animate('0.3s ease', style({ transform: 'translateY(2rem)', opacity: 0 }))


In ionViewDidEnter() I set this.loaded = true after API call completes.

In ionViewWillLeave() I set this.loaded = false

My component has [@fadeIn]=“loaded” as an attribute.

My ionic info dump:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4-201703240321 (nightly build)
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002