目前我想在專案中使用 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 的值的,其中我也嘗試過用三元判斷的方式處理,想請問這問題可能出在哪裡還是說其實不能使用這個方式綁定?