当前位置：首页 > VUE

不用jquery实现vue动画

2026-01-20 15:01:05VUE

使用纯JavaScript实现Vue动画

在Vue中实现动画效果可以不依赖jQuery，通过Vue的内置过渡系统或直接操作CSS和JavaScript即可完成。以下是几种常见方法：

使用Vue的`<transition>`组件

Vue提供了内置的<transition>组件，用于在元素插入、更新或移除时应用过渡效果。无需jQuery，直接利用CSS或JavaScript钩子实现动画。

<transition name="fade">
  <div v-if="show">内容</div>
</transition>

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

通过CSS动画

直接使用CSS的@keyframes定义动画，结合Vue的动态类绑定控制动画触发。

<div :class="{ 'animate': isAnimated }">动画元素</div>

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.animate {
  animation: slideIn 0.5s forwards;
}

使用JavaScript钩子

通过Vue的<transition>组件的JavaScript钩子（如@before-enter、@enter等）实现更复杂的动画逻辑。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <div v-if="show">JavaScript动画</div>
</transition>

methods: {
  beforeEnter(el) {
    el.style.opacity = 0;
    el.style.transform = 'scale(0)';
  },
  enter(el, done) {
    const animation = el.animate([
      { opacity: 0, transform: 'scale(0)' },
      { opacity: 1, transform: 'scale(1)' }
    ], { duration: 500 });
    animation.onfinish = done;
  },
  leave(el, done) {
    const animation = el.animate([
      { opacity: 1, transform: 'scale(1)' },
      { opacity: 0, transform: 'scale(0)' }
    ], { duration: 500 });
    animation.onfinish = done;
  }
}

结合GSAP等动画库

若需要更复杂的动画效果，可集成专业动画库如GSAP（GreenSock），无需jQuery。

<div ref="box">GSAP动画</div>

import { gsap } from 'gsap';

methods: {
  animateBox() {
    gsap.to(this.$refs.box, {
      duration: 1,
      x: 100,
      rotation: 360,
      ease: 'power2.out'
    });
  }
}

动态切换类名

通过Vue的响应式数据动态切换类名，触发CSS过渡或动画。

<div :class="['box', { 'active': isActive }]"></div>

.box {
  transition: all 0.3s;
}
.box.active {
  background: #42b983;
  transform: translateY(10px);
}

使用Web Animations API

现代浏览器支持Web Animations API，可直接通过JavaScript控制动画。

const element = document.getElementById('animated');
element.animate([
  { transform: 'translateY(0)' },
  { transform: 'translateY(-20px)' }
], {
  duration: 300,
  iterations: 1,
  direction: 'alternate'
});

以上方法均无需jQuery，充分利用Vue生态或原生浏览器API实现动画效果。

不用jquery实现vue动画