离子项目上的关键帧动画过渡不顺畅

Question

当我的离子项目添加到列表中时，我正在为其添加动画。 它可以工作，但动画过渡并不像在 PC 或 Android 设备上使用 Chrome 时那样平滑。

如果我在普通 div 上使用动画（使用背景颜色），它会按预期工作，颜色慢慢从蓝色褪色为白色。 然而，当使用 --background 时，你必须为 ion-item 使用 --background ，它会保持蓝色，直到最后，然后跳到白色。

它应该类似于这里的示例： https://css-tricks.com/using-multi-step-animations-transitions/

关于如何顺利过渡有什么建议吗？

我正在使用 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}">

在 iOS 上，颜色变化也被完全忽略。 只是不透明度改变了。

编辑： git 仓库在这里： https://github.com/madmacc/Ionic5HighlightAnimation

Answer 1

作为解决方法，您可以将自定义属性

--background

设置为透明并使用本机背景颜色。

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