Vue3 按钮点击抖动效果实现 - HTML, CSS, JS 代码示例

<template>
  <button @click="handleClick" :class="{ shaking: isShaking }">点击我</button>
</template>
<script>
export default {
  data() {
    return {
      isShaking: false
    }
  },
  methods: {
    handleClick() {
      this.isShaking = true;
      setTimeout(() => {
        this.isShaking = false;
      }, 500);
    }
  }
}
</script>
<style>
@keyframes shake {
  0% { transform: translateX(0); }
  10%, 90% { transform: translateX(-5px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

.shaking {
  animation: shake 0.5s;
}
</style>