当前位置：首页 > VUE

不用jquery实现vue动画

2026-02-21 06:54:12VUE

使用纯JavaScript实现Vue动画

在Vue中不使用jQuery实现动画效果，可以通过Vue内置的过渡系统或直接操作CSS和JavaScript来实现。以下是几种方法：

Vue过渡和动画系统

Vue提供了<transition>和<transition-group>组件，用于处理进入/离开和列表动画。这些组件不需要jQuery，直接使用CSS或JavaScript钩子即可实现动画效果。

<transition name="fade">
  <div v-if="show">This will fade in and out</div>
</transition>

对应的CSS：

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

JavaScript动画钩子

通过Vue的JavaScript钩子可以实现更复杂的动画逻辑：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <div v-if="show">This will be animated with JavaScript</div>
</transition>

对应的JavaScript方法：

methods: {
  beforeEnter(el) {
    el.style.opacity = 0;
    el.style.transform = 'translateY(20px)';
  },
  enter(el, done) {
    const animation = el.animate([
      { opacity: 0, transform: 'translateY(20px)' },
      { 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(20px)' }
    ], {
      duration: 500
    });
    animation.onfinish = done;
  }
}

使用Web Animations API

现代浏览器支持Web Animations API，可以直接操作动画：

methods: {
  animateElement(el) {
    el.animate([
      { transform: 'scale(1)', opacity: 1 },
      { transform: 'scale(1.2)', opacity: 0.8 },
      { transform: 'scale(1)', opacity: 1 }
    ], {
      duration: 1000,
      iterations: 1
    });
  }
}

直接操作CSS类

通过动态添加/移除CSS类来实现动画效果：

<div :class="{ 'animate': isAnimating }">This will animate</div>

.animate {
  transition: all 0.3s ease;
  transform: scale(1.1);
}

data() {
  return {
    isAnimating: false
  }
},
methods: {
  triggerAnimation() {
    this.isAnimating = true;
    setTimeout(() => {
      this.isAnimating = false;
    }, 300);
  }
}

使用GSAP等专业动画库

如果需要更复杂的动画效果，可以考虑使用GSAP等专业动画库：

不用jquery实现vue动画

import { gsap } from 'gsap';

methods: {
  animateWithGSAP(el) {
    gsap.to(el, {
      duration: 0.5,
      x: 100,
      opacity: 0.5,
      ease: 'power2.out'
    });
  }
}

这些方法都不依赖jQuery，而是利用Vue内置功能或现代浏览器API实现动画效果。选择哪种方法取决于动画复杂度和项目需求。