when I click on right and left button then data should come with animation but it didn't work for me
I added some void animation in angular and put a trigger on my HTML element animation did work when the page is refresh but it didn't work when I click on right or left button
animations:[
trigger('divstate',[
state('in',style({
opacity:1,
transform:'translateX(0)'
})),
transition('void => *',[
style({
opacity:0,
transform:'translateX(-100px)'
}),
animate(300)
]),
]),
]
<div class="box-2" [@divstate]>
<div class="left-arrow">
<a class="cursor_pointer" (click)="previousData()">
<img src="assets/left_arrow.png" alt="">
</a>
</div>
<div class="container-1">
<div class="grid-1" [@divstate]>
<div class="item-1 font_p">
<h3 class="color_saffron" [@divstate]>{{cardData[currentPosition].section1}}</h3>
<br>
<p [@divstate]>{{cardData[currentPosition].section1Text}}
</p>
<br>
<h3 class="color_saffron" [@divstate]>{{cardData[currentPosition].section2}}</h3><br>
<p [@divstate]>{{cardData[currentPosition].section2Text}}</p>
</div>
<div class="item-2" [@divstate]>
<img src="{{cardData[currentPosition].image1}}" alt="">
</div>
</div>
<br><br>
<div class="grid-2" [@divstate]>
<div class="item-2">
<img src="{{cardData[currentPosition].image2}}" alt="">
</div>
<div class="item-1 font_p" [@divstate]>
<h3 class="color_saffron">{{cardData[currentPosition].section3}}</h3>
<br>
<p>{{cardData[currentPosition].section3Text}}</p>
</div>
</div>
</div>
<div class="right-arrow">
<a class="cursor_pointer" (click)="onAnimate()" (click)="nextData()">
<img src="assets/right_arrow.png" alt="">
</a>
</div>
</div>
whenever I click on the left or right button then data should come with animation, animation did work when the page is refresh
