Unable to implement ionic animation in a div inside every slider

@dipankar123 wrote:

Dear all,
I am trying to implement ionic animation api inside a div. this div is placed in every ion-slide
ionic animation working in 1st ion-slide but not working from 2nd ion-slide

here is my code
HTML

<ion-slides #slider [options]="slideOpts" effect='fade'  (ionSlideDidChange)='slideChanged()'>
    <ion-slide class="slider" *ngFor="let item of slideImages" [ngStyle]="{'background-image': 'url('+item.image+')'}">
      <div class="slide-background">
        <div class="info-on" id="info"
        [innerHTML]="domSanithize.bypassSecurityTrustHtml(item.info)" #animatedInfo>
      </div>
      </div>
    </ion-slide>
  </ion-slides>

page.ts

slideImages = [
    {
      info: 'this is <br><span style=\'font-size: 3rem;font-weight: 900\'>First information</span><br> click  here',
      image: '../../../assets/IMG/frstInfo.jpg',
    },
    {
      info: 'this is <br><span style=\'font-size: 3rem;font-weight: 900\'>Second information</span><br> click  here',
      image: '../../../assets/IMG/2ndInfo.jpg',
    },
    {
      info: 'this is <br><span style=\'font-size: 3rem;font-weight: 900\'>Thirs information</span><br> click  here',
      image: '../../../assets/IMG/3rdInfo.jpg',
    },
]


ngOnInit() {
    this.menu.enable(false);
    setTimeout(() => {
      this.playAnimation(); //<--animation working
    }, 700);
  }

playAnimation() {
    console.log('started animation');
    this.animation = Animation;
    this.animation = this.animationCtrl.create()
      .addElement(this.animatedInfo.nativeElement)
      .duration(1300)
      .fromTo('left', '-10px', '10px')
      .fromTo('opacity', '0', '1');

    this.animation.play();
}

slideChanged() {
    this.playAnimation()// not working
  }

please help
thanks in advance

Posts: 1

Participants: 1

Read full topic