Ionic v5 animation called twice on android-CodePudding

I am using ionic v5.6.13 and angular v12.1.1

I have an animation that fades in all elements with the .fadeInBottom class from the bottom.

It works fine on iOS, but on Android it sometimes calls the animation twice and i can't seem to see a pattern for when it's trigged twice.

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;
}

The animation is called in the page

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

CodePudding user response：

I sometimes see a double animation on android when using 'opacity'. I don't know it this will work out but try to set

 .fadeInBottom{
     opacity: 0; 
  }

to all the elements that you want to animate in you css file as a default initial value.

Apart from that, I'd rather making all the animations in my css file using @keyframe, you can read more about it here: https://developer.mozilla.org/es/docs/Web/CSS/@keyframes