Web Animations and cached views

Ionic Framework ionic-v3
1

Hi there, for folks using web animation APIs, how do you deal with cached views? For example, whenever a view shows up, I’d like for a particular component to be animated.
I’m looking for a clean way to do it that does not involve hide and re-create hacks in ionViewWillEnter() if possible. Any ideas or experiences to share?

For example, I want my <ion-footer> to always animate when the view is loaded (cached or not).

Here is what I am doing now (which works, not sure if this is the right way)

animations: [
    trigger('cardUsed', [
      state('hide', style({transform: 'translateY(100%)'})),
      state('reveal', style({transform: 'translateY(0)'})),
      transition('hide => reveal', [
        animate('400ms ease-in-out')
      ])
    ])
]

<ion-footer [@cardUsed]="cardState" class="cardFooter">
    <p text-center>card in use: {{cardInUse}}</p>
</ion-footer>

And this “hack” in ionViewWillEnter() to force this each time:

this.cardState = 'hide';
setTimeout (_ => {this.cardState = 'reveal';},20);