Ionic v5动画在android上调用两次

Question

我使用ionicv5.6.13和angularv12.1.1

我有一个动画，淡出所有元素与.fadeInBottom类从底部。

它在iOS上工作得很好，但在Android上它有时会调用动画两次，当它被触发两次时，我似乎看不到一个模式。

animations.service.ts

async fadeInBottom() {
let elements = Array.from(document.getElementsByClassName('fadeInBottom'));
const animations = elements.map((el, i) => {
return this.animaitionCtrl.create()
.addElement(el)
.duration(150)
.delay(i * 25)
.fromTo('opacity', 0,1)
.fromTo('transform', 'translateY(30px)', 'none')
.play();
});
await Promise.all(animations)
return true;
}

动画在页面

中被调用

async ionViewDidEnter() {
await this.animationsService.fadeInBottom();
}

Answer 1

当我使用不透明度时，我有时会在android上看到双重动画。我不知道这样行不行试着设置

.fadeInBottom{
opacity: 0; 
}

将所有你想在CSS文件中动画化的元素作为默认初始值。

除此之外，我宁愿在我的css文件中使用@keyframe来制作所有的动画，你可以在这里阅读更多关于它的内容:https://developer.mozilla.org/es/docs/Web/CSS/@keyframes