List item remove animation

Ionic Framework ionic-v3
1

In version one there was a class called item-remove-animate which could be added to an <ion-item> tag to provide animation when removing it from the list.

I have looked at the version 2 CSS and also in the documentation and haven’t found anything related to this so I was wondering does version 2 have anything implemented for this yet?

2

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

1 Like
3

Thanks for the update :+1:

4

hey, any news about it?

5

The new ngAnimate still has some ways to go. It’s still being worked on so hopefully it will be done soon.

6

If you have any interest, it’s pretty easy to “roll-your-own” simple CSS animation, if you just want something like a fadeout on delete before the item disappears completely. I’m doing that by adding a red bg (isDeleting class) before calling my API deleteItem, then switching it to fadeout on success, with a setTimeout matching the fade time before pruning the item from the list:

item.isDeleting = true;
calr.gapi.deleteItem(item).subscribe(
  (r)=> {
    if (r == "OK!") {
      item.isDeleted = true;
      setTimeout(()=> {
        calr.items.splice(calr.items.indexOf(item), 1)
      }, 300); // timeout to match fadeout animation...
    }
  }
);
7

Any news about this?

8

Hi,

Little late but, I made a plnkr using angular 2 animations, just animating height / minHeight to collapse the list item and opacity to fade it out as it closes, you can use other transforms if you wish.

More info on using transforms and such here:
https://angular.io/docs/ts/latest/guide/animations.html

Thanks to @mirkonasato for the plunkr template.

*Note. Have not tested on Android and in order for animations to work on iOS you will need the web-animations polyfill:

Also an article about using web animations in Ionic 2 here:

Hopefully this helps.

4 Likes