0

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 when using chrome on PC or an Android device.

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.

It should look like the example here: https://css-tricks.com/using-multi-step-animations-transitions/

Any suggestions on how to get this transitioning smoothly?

I am using Ionic 5

@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}">

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

EDIT: git repo here: https://github.com/madmacc/Ionic5HighlightAnimation

MadMac
  • 4,048
  • 6
  • 32
  • 69
  • This explains the ios / safari issues: https://bugs.webkit.org/show_bug.cgi?id=201736 – MadMac Mar 17 '20 at 19:56
  • It appears that css variables are not fully animatable https://stackoverflow.com/questions/54594167/why-cant-i-animate-custom-properties-aka-css-variables – MadMac Mar 17 '20 at 21:10

0 Answers0