.

iT邦幫忙

0

在 alpine.js 中可以透過綁定 x-transition 判斷動畫方向嗎?

  • 分享至 

  • xImage

目前我想在專案中使用 x-transition 來製作滑入動畫,遇到的問題是因為頁面在中間他需要判斷往哪個方向划動或是切換,頁面則會隨著滑動或切換的方向滑出消失,所以我是打算綁定動畫效果來實現。

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

但目前的問題是我在 x-data 中判斷後代入的結果並不能觸發 :x-transition:leave-end 本身導致他只會停在原地不動然後消失

這邊是我判斷滑動的方式

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));
        }
    },

這邊我有試著 console 出 leaveEndClass 他是有 opacity-0 translate-x-full 的值的,其中我也嘗試過用三元判斷的方式處理,想請問這問題可能出在哪裡還是說其實不能使用這個方式綁定?

.
圖片
  直播研討會

尚未有邦友回答

立即登入回答