当前位置：首页 > VUE

vue实现jquery动画

2026-02-19 23:38:37VUE

Vue 实现 jQuery 动画的方法

在 Vue 中实现类似 jQuery 的动画效果，可以通过以下几种方式完成。Vue 提供了内置的过渡和动画系统，同时也支持直接使用 CSS 动画或第三方库。

使用 Vue 过渡系统

Vue 的 <transition> 组件可以方便地实现进入/离开的动画效果，类似于 jQuery 的 fadeIn、slideUp 等。

vue实现jquery动画

<template>
  <button @click="show = !show">Toggle</button>
  <transition name="fade">
    <p v-if="show">Hello Vue!</p>
  </transition>
</template>

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

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

使用 CSS 动画库

可以引入 Animate.css 等 CSS 动画库，直接在 Vue 中使用。

vue实现jquery动画

<template>
  <button @click="show = !show">Toggle</button>
  <transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <p v-if="show">Hello Vue!</p>
  </transition>
</template>

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

使用 Velocity.js 或 GSAP

如果需要更复杂的动画效果，可以集成 Velocity.js 或 GSAP 这类 JavaScript 动画库。

<template>
  <button @click="animate">Animate</button>
  <div ref="box" class="box"></div>
</template>

<script>
import Velocity from 'velocity-animate'
export default {
  methods: {
    animate() {
      Velocity(this.$refs.box, { 
        width: '200px',
        opacity: 0.5
      }, {
        duration: 1000,
        easing: 'ease-in-out'
      })
    }
  }
}
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background: #42b983;
}
</style>

使用 Vue 的 JavaScript 钩子

Vue 的过渡系统提供了 JavaScript 钩子，可以自定义动画逻辑。

<template>
  <button @click="show = !show">Toggle</button>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <p v-if="show">Hello Vue!</p>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  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>