Same question as How to trigger n variable states (same state) in angular animations? but there is no code posted in the answer and the stackoverflow gods do not allow me to post there.
Snippet for reference, it won't run
animations: [
trigger('slide', [
state('left', style({
transform: 'translateX(-{{translationFactor}}px)'
}), {
params: {
translationFactor: 0
},
}),
state('right', style({
transform: 'translateX(-{{translationFactor}}px)'
}), {
params: {
translationFactor: 0
},
}),
transition('* => *', animate(500)),
]),
],
onAnimationEnd(event: AnimationEvent) {
this.isSliding = false;
}<div (@slide.done)="onAnimationEnd($event)" [@slide]="{ value: activeDirection, params: { translationFactor: translationFactor } }">When the transition is between these states, it works but it doesn't work when you have to go from 'right' to "more" 'right', which makes sense, but I can't figure out how to reset the state so when 'right' ends it can also transition to 'right' again