当前位置：首页 > VUE

vue实现滚动动画

2026-02-21 19:57:04VUE

Vue 实现滚动动画的方法

使用 CSS Transition 和 Vue 指令

通过 Vue 的 v-bind 和 CSS Transition 实现简单的滚动动画。定义一个数据属性控制动画状态，结合 CSS 过渡效果。

<template>
  <div 
    class="scroll-element" 
    :style="{ transform: `translateY(${scrollPosition}px)` }"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      scrollPosition: 0
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.scrollPosition = window.scrollY * 0.5; // 调整滚动速度
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

<style>
.scroll-element {
  transition: transform 0.3s ease-out;
}
</style>

使用 Vue Transition 组件

Vue 的 <transition> 组件可以方便地实现进入/离开动画，结合滚动事件触发状态变化。

<template>
  <transition name="fade">
    <div v-if="isVisible" class="animated-element"></div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    };
  },
  mounted() {
    window.addEventListener('scroll', this.checkVisibility);
    this.checkVisibility();
  },
  methods: {
    checkVisibility() {
      const element = this.$el.querySelector('.animated-element');
      if (element) {
        const rect = element.getBoundingClientRect();
        this.isVisible = rect.top < window.innerHeight;
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.checkVisibility);
  }
};
</script>

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

使用第三方库（如 AOS）

AOS (Animate On Scroll) 是一个流行的库，可以轻松实现滚动动画。

安装 AOS：

npm install aos --save

在 Vue 中使用：

<template>
  <div data-aos="fade-up" data-aos-duration="1000">
    Content to animate
  </div>
</template>

<script>
import AOS from 'aos';
import 'aos/dist/aos.css';

export default {
  mounted() {
    AOS.init();
  }
};
</script>

使用 Intersection Observer API

现代浏览器支持的 Intersection Observer API 可以更高效地检测元素是否进入视口。

<template>
  <div ref="target" class="observable-element"></div>
</template>

<script>
export default {
  data() {
    return {
      observer: null
    };
  },
  mounted() {
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate');
        }
      });
    });

    this.observer.observe(this.$refs.target);
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
  }
};
</script>

<style>
.observable-element {
  opacity: 0;
  transition: opacity 0.5s;
}

.observable-element.animate {
  opacity: 1;
}
</style>

使用 GSAP 实现高级动画

GSAP 是一个强大的动画库，可以实现复杂的滚动触发动画。

安装 GSAP：

npm install gsap

在 Vue 中使用：

vue实现滚动动画

<template>
  <div ref="box" class="gsap-box"></div>
</template>

<script>
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export default {
  mounted() {
    gsap.to(this.$refs.box, {
      scrollTrigger: {
        trigger: this.$refs.box,
        start: "top center",
        end: "bottom center",
        scrub: true
      },
      x: 500,
      rotation: 360
    });
  }
};
</script>