dynamic transitions setup

[shopapps]

I am trying animate a set of divs and have them slide in / out form the left/right depending on if someone presses the forward or back button

<div 
     id="decision_accept" 
     x-ref="accept"
     class="card-body  w-100 position-absolute"
     x-bind="animation"
     x-show="card == 'accept'"
> CONTENT</div>

then in the x-data i have:

    Alpine.data('decision_page', (config) => ({
                total: config.total,
                card: config.card,
                transition: config.transition,
                path: config.path,
                animation: {
                    ['x-transition:enter']() {
                        if(this.transition.direction == 'left'){
                            return 'slide-in-left bg-green';
                            console.log('ENTER FROM LEFT');
                        } else {
                            return ' slide-in-right bg-yellow';
                            console.log('ENTER FROM RIGHT');
                        }
                    },
                    ['x-transition:leave']() {
                        if(this.transition.direction == 'left'){
                            return 'slide-out-left bg-red';
                            console.log('EXIT TO LEFT');
                        } else {
                            return 'slide-out-right bg-black';
                            console.log('EXIT TO RIGHT');
                        }
                    },
                }
                
            }));

if i set transition.direction to be left or right the animations work as expected.

however if i change the transition.direction dynamically e.g. via back button or forward button, only the first animation is ever used, even though the console log indicates the correct values are being returned.

it's as if the initial response of the bound function is being cached?

help?? :-)

[SimonBroekaert]

Hi!, Did you ever find a solution for this?

Thanks!