CSS keyframe animation on ion-item is not transitioning smoothly

Ionic Framework
1

I am adding an animation to my ion-item as it is added to the list. It works but the animation transition is not smooth as it should be. If I use the animation on a normal div (using background-color) it works as expected with the color slowly fading from blue to white. However when using --background which you have to for ion-item it stays blue until the end then jumps to white.

Any suggestions on how to get this transitioning smoothly?

I am using Ionic 5

Edit: Also on iOS the color change is ignored completely. Just the opacity is changed.

@keyframes highlight-add {
  0% {
    --background: #a8d8ea;
    opacity: 0.3;
  }
  30% {
    --background: #a8d8ea;
    opacity: 1;
  }
  100% {
    --background: #fff;
  }
}

.student-item-animate {
  -webkit-animation: highlight-add 5s; 
  animation: highlight-add 5s;
}

 <ion-item *ngFor="let student of studentsBooked" [ngClass]="{'student-item-animate': student.isNew}">

See my stackoverflow here: https://stackoverflow.com/questions/60679644/keyframe-animation-on-ion-item-is-not-transitioning-smoothly

2

could you put together a sample app and upload it to github? Hard to know exactly the issue without seeing things in action.

3

Hi Mike,

Sure here you go:

Thanks for the response. I was just listening to you on youtube for the Ionic 5 demo last night!

Cheers,
Flon

4

Ahhh ok, I see what’s happening.

So looks like it’s a bug in safari.

https://bugs.webkit.org/show_bug.cgi?id=201736

The demo they post in the issue report has the same problem.
Just need to wait for apple to fix the issue sadly.

5

Ah I see thanks for that.

There are actually two issues here though.
The main one is that the animation is not smooth in chrome on PC or Android.
If you look at the div example vs the ion-item example the transition back to white is quite different.

Any suggestions on how to resolve that?

Cheers,
Flon

6

What you probably have is due to

  • Adding new DOM nodes causing layout reflow
  • Animating things right on add can expensive.

I’d highly suggest looking into Angular’s animation API for this, as it can control the DOM read/writes in a much more performant way.

7

Funnily enough I have just been looking at how that works in Ionic 5.
I will investigate and post any successes back here for anyone else.

If I can’t get it to work I may just use pure HTML rather than ion-item as it works fine with this in chrome / android.

Keep up the good work, Ionic 5 is looking great.

8

It appears that CSS variables have some animation issues. This is a good discussion on it.

Not sure what the --background variable does under the hood but I think the above applies.
As you suggested I will look into the Animation API to see if this allows me to animate --background for Ionic components.

9

I think you’ve hit the nail on the head here. It’s pretty obvious that the issue lies with Ionic’s Web Components and that is why you’re experiencing a difference in animation VS plain HTML.

So just use plain HTML and CSS where you need to and avoid Web Components.

10

@Daveshirman I think you are right. Even if I use the Angular animations API I believe it still uses the same CSS and I would need to animate the color of the --background variable if I was to use an ion-item.
It’s a pain as it will take a bit of work to develop a pure html replacement for ion-item as its comes with some nice features such as a sliding item etc

11

Just adding a bit here…there were 2 issues pointed out

  • Animating css variables
  • Sluggish performance

The CSS Variable part is due to a bug in webkit. As I pointed out earlier, they are aware of it. There is no work around for this on iOS.

The sluggish performance is probably do to the DOM read/writes happening. Angular Animations can help here by coordinating animations and dom inserts.

12

In my personal opinion, the more I’ve used Ionic 4 (coming from 2 and 3, several years’ experience), the more I believe it’s not a good approach any more for mobile apps.

Using a WebView and the DOM works for web sites and apps that run on powerful desktops. It runs like crap on mobile if you try to do even remotely complex animations.

All the Ionic demos on the docs and tutorials appear great and smooth, that is until you run them on a real device, with real limitations.

I really do applaud the work the Ionic team has done over the years, but the move to Web Components has been the nail in the coffin for me.

Download any Flutter demo app from Google play and run on a mid range Android device. Excellent performance, native speed, smooth animations and often overlooked end-of-page feedback bounce animation that Ionic lacks. You know why? Because they’re drawing the whole UI straight to a custom graphics layer, no DOM.

Time and time again I see people noticing this subtle animation’s absence and it DOES make a difference.

Why does Ionic not have proper swipeable tabs in the framework itself? Because it’s crap with a Web View. I’ve been using SuperTabs plugin as a replacement. It’s ok, but nowhere near as smooth as native. People can and do notice the difference.

I’m done making compromises and excuses for why I should keep developing in Ionic. It doesn’t matter how large the percentage of apps in the store are powered by Ionic (a recent blog post of theirs). What matters is the overall quality to the end user, which simply does not cut it.

You could make an argument that it is an advantage using Web Components, code reusability, but let’s get real: how often do you really reuse an entire component? Never. You ALWAYS end up taking it, thinking you’ll reuse it and just making a new custom version anyway. So the whole premise of Web Components falls apart.

Ionic will always be hampered by using a WebView. It’s that simple.

My opinion based on 4 years of dev with several published apps, feedback and observations.

Your mileage may vary. Happy to hear other opinions.

13

@Daveshirman not going to get into this here, but if you have any constructive and actionable feedback, happy to chat more.

14

Hey Mike, I’d love to chat sure. I’d prefer email if you’re game.

15

mike at ionic dot io

16

Hi Mike,

Agree there are two issues. Thanks for the link on the safari issue.

The issue in chrome, do you think that is a performance issue or simply an issue with lack of support for variables in key frame animations?
It works fine with any normal css properties eg opacity or background-color but when using —background it simply jumps to the final state without a transition. Also the discussion in the link I added above suggested it was a known issue.
Hence my thinking it was not a performance issue.

For the small amount of animation I do I typically haven’t noticed any performance issues in the past. I think it’s about choosing the right tool for the job and Ionic works very well for my purposes.

Cheers,
Flon