Ionic v5 动画在 android 上调用了两次

比杰尼

我正在使用 ionic v5.6.13和 angular v12.1.1

我有一个动画,它.fadeInBottom从底部中淡入所有元素

它在 iOS 上运行良好,但在 Android 上它有时会调用两次动画,我似乎看不到它被触发两次的模式。

动画.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();
}
jlovera3

使用“不透明度”时,我有时会在 android 上看到双重动画。我不知道这会成功,但尝试设置

 .fadeInBottom{
     opacity: 0; 
  }

将要在 css 文件中设置动画的所有元素作为默认初始值。

除此之外,我宁愿使用@keyframe 在我的 css 文件中制作所有动画,您可以在此处阅读更多相关信息:https : //developer.mozilla.org/es/docs/Web/CSS/@keyframes

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章