Can I bind x-transition in alpine.js like :x-transition:leave-end？

Can I use Alpine.js to set a variable within x-data and bind my animation effects based on the swipe direction? Currently, it doesn’t work when I try to do it this way.

:x-transition:leave-end="leaveEndClass"

Below is the logic for my actions

 handleTouchEnd() {
        if (!this.isSwiping) return;
        this.isSwiping = false;

        const touchEndTime = Date.now();
        const timeDiff = touchEndTime - this.touchStartTime;
        const horizontalSwipe = this.swipeEndX - this.swipeStartX;
        const verticalSwipe = this.swipeEndY - this.swipeStartY;

      
        if (timeDiff < 150 || Math.abs(horizontalSwipe) < 50 || Math.abs(verticalSwipe) > Math.abs(horizontalSwipe)) {
            return;
        }
        if (horizontalSwipe > 0) {
            this.leaveEndClass = 'opacity-0 translate-x-full';
            this.setTabIndex(Math.max(this.tabIndex - 1, 1));
        } else if (horizontalSwipe < 0) {
            this.leaveEndClass = 'opacity-0 -translate-x-full';
            this.setTabIndex(Math.min(this.tabIndex + 1, 3));
        }
    },

sorry my english is not very good

Currently, the way I wrote it doesn’t work. I also tried using a ternary condition, but it didn’t work either. I want to determine the swipe direction to make my animation slide either to the right or to the left.