当前位置：首页 > VUE

vue点击实现动画

2026-01-08 08:17:51VUE

Vue 中实现点击动画的方法

使用 Vue 过渡（Transition）组件

Vue 提供了内置的 <transition> 组件，可以轻松实现元素进入/离开的动画效果。结合 v-if 或 v-show 控制元素的显示隐藏，通过 CSS 定义动画样式。

<template>
  <div>
    <button @click="show = !show">Toggle Animation</button>
    <transition name="fade">
      <p v-if="show">This element will fade in/out</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用 CSS 类名绑定

通过 v-bind:class 动态切换 CSS 类名实现动画效果。这种方法适合需要更精细控制动画的场景。

<template>
  <div>
    <button @click="animate = !animate">Toggle Animation</button>
    <div :class="{ 'scale-animation': animate }">Animated Element</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      animate: false
    }
  }
}
</script>

<style>
.scale-animation {
  animation: scale 0.5s;
  transform: scale(1.1);
}

@keyframes scale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
</style>

使用第三方动画库

可以集成第三方动画库如 Animate.css 或 GSAP 来实现更复杂的动画效果。

<template>
  <div>
    <button @click="animate = !animate">Toggle Animation</button>
    <transition
      enter-active-class="animate__animated animate__bounceIn"
      leave-active-class="animate__animated animate__bounceOut"
    >
      <p v-if="animate">Bouncing Element</p>
    </transition>
  </div>
</template>

<script>
import 'animate.css'
export default {
  data() {
    return {
      animate: false
    }
  }
}
</script>

使用 JavaScript 钩子

对于需要编程控制的复杂动画，可以使用 Vue 过渡的 JavaScript 钩子函数。

<template>
  <div>
    <button @click="show = !show">Toggle Animation</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <p v-if="show">JavaScript Controlled Animation</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.transform = 'translateY(50px)'
    },
    enter(el, done) {
      const animation = el.animate([
        { opacity: 0, transform: 'translateY(50px)' },
        { opacity: 1, transform: 'translateY(0)' }
      ], {
        duration: 500
      })
      animation.onfinish = done
    },
    leave(el, done) {
      const animation = el.animate([
        { opacity: 1, transform: 'translateY(0)' },
        { opacity: 0, transform: 'translateY(50px)' }
      ], {
        duration: 500
      })
      animation.onfinish = done
    }
  }
}
</script>

使用 Vue 的过渡模式

当需要在多个元素之间切换时，可以使用 Vue 过渡的模式属性来控制动画顺序。

<template>
  <div>
    <button @click="isEditing = !isEditing">Toggle Mode</button>
    <transition name="fade" mode="out-in">
      <button v-if="isEditing" key="save">Save</button>
      <button v-else key="edit">Edit</button>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isEditing: false
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

以上方法可以根据具体需求选择使用，从简单的 CSS 过渡到复杂的 JavaScript 控制动画，Vue 提供了多种灵活的方式来实现点击触发的动画效果。

vue点击实现动画