vue 手機版按鈕的點擊事件如何跑動畫

在手機瀏覽器點擊按鈕的時候,會觸發兩類事件,touchmouse

有時候我只是想要在手機版也有點擊一下的動畫,但是 css 的hover就是怎麼跑怎麼怪,button 還會變成focus狀態,hover 跑下去就回不來了。

這時候就可以使用 vue 的touchstart

 

先寫一個按下去的狀態的 css

點下去之後,我希望增加一個class name,內容是讓它放大一點點。

button {
  transition: .2s;
}

.touchBigger {
  transform: scale(1.1);
}

 

加入按鈕的觸控事件

 <button
    :class="{ touchBigger: isTouching }"
    @touchstart.prevent="handleTouchstart"
    @touchend.prevent="handleTouchend"
  >
    點一下會放大
  </button>
data() {
  return {
    isTouching: false,
  };
},
methods: {
  handleTouchstart() {
    this.isTouching = true;
  },
  handleTouchend() {
    this.isTouching = false;
  }
},

為什麼這邊要加上.prevent呢?因為手機版除了會觸發touch類事件,也會同時觸發其他什麼mouse類事件拉、click事件之類的,但是我不想要手機版觸發這麼多事件,這樣會彷彿這顆按鈕按了很多下。

所以如果你有@click事件,請在你的touch中手動加入在某個狀態下,這樣就只會觸發一次。

 <button
    :class="{ touchBigger: isTouching }"
    @click.prevent="handleClick"
    @touchstart.prevent="handleTouchstart"
    @touchend.prevent="handleTouchend"
  >
    點一下會放大
  </button>
 methods: {
  handleClick() {
    this.$emit("onClick");
  },
  handleTouchstart() {
    this.isTouching = true;
  },
  handleTouchend() {
    this.isTouching = false;
    this.handleClick();
  }
},

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。