Ionic List - Pop Item animation

Ionic Framework ionic-v3
1

Just wanted to check if anyone has successfully animated the removal of a list item when it is popped, or updated from it’s binded data array?

I’ve been checking the docs, experimenting, and have searched the forums for an answer.
The closest I got was this post back in May '16: List item remove animation in which @mhartington had stated:

This is because there are no animation hooks in angular 2 right now.

The angular team has shown off what they have been working on but have not released usable code. So for now, we have to wait until it’s released to be able to build up some code demos

Does anyone know if this still the case? Or has animation hooks been added to angular 2 now: Angular

Any updates would be greatly appreciated, as I’d like to prioritise features based on what’s doable in the current RC.

Thanks!

2

Sure it’s possible now.

I have it working in a demo app with the following syntax

  <a [@fadeInOut] ion-item *ngFor="let track of listing" detail-none (click)="detail(track)">
    <ion-thumbnail item-left>
      <img [src]="track.album.images[0].url" alt="">
    </ion-thumbnail>
    <h2>{{track.name}}</h2>
    <h3>{{track.artists[0].name}}</h3>
    <p>{{track.album.name}}</p>
    <ion-note item-right>
      {{track.duration_ms | moment}}
    </ion-note>
  </a>

import { Component, trigger, state, style, animate, transition } from '@angular/core';
@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
  animations: [
    trigger('fadeInOut', [
      state('void', style({ opacity: '0' })),
      state('*', style({ opacity: '1' })),
      transition('void <=> *', animate('150ms ease-in'))
    ])
  ]
})

Basically its an instant search, so when the results return something, they fade in. When it’s removed, it’s faded out.
This is all using the new animations hooks in angular.

6 Likes
3

@mhartington - Thanks for sharing this. it’s great!

4

Do you have an example of how to stagger in items for an ngFor?
I have this issue here: Best method for component animations?

5

Actually, I ran into a bit of an issue with a custom component.

The method you shared works for any ionic component and standard html elements, however, my custom component custom-card did not apply the transition. Investigating further I found that the animations /css rules were applied, but that the elements did not represent these changes on the page.

e.g. If I manually applied opacity: 0 rule in css, the rule could be seen as applied in chrome dev tools, but the element was still presented on screen. The fix was to set explicitly set the display type for the custom component, in my case display:block. Just a heads up for anyone else who finds themselves in this situation.

TL;DR: Explicitly apply display: type for custom components in your scss.