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