点击触发晃动效果

<template>
  <div class="button" @click="toggleSway" :class="{ sway: isShaking }">点击我触发抖动特效</div>
</template>

<script setup>
import { ref } from 'vue';

const isShaking = ref(false);
let timer = ref()

const toggleSway = () => {
  clearTimeout(timer.value)
  isShaking.value = !isShaking.value;
  // 添加短暂延迟以确保动画能够重新应用
  timer.value = setTimeout(() => {
    isShaking.value = !isShaking.value;
    console.log(111);
  }, 1000);
};
</script>

<style scope>
.button {
  margin: 50px;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid black;
  cursor: pointer;
  user-select: none;
  /* 禁止选中文本 */
}

.sway {
  animation: swayAnimal 800ms ease-in-out;
}

@keyframes swayAnimal {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }

  50% {
    transform: translate3d(-4px, 0, 0);
  }
}
</style>