当前位置：首页 > VUE

vue实现滚动动画

2026-01-21 04:27:50VUE

Vue 实现滚动动画的方法

使用 CSS Transition 和 Vue 指令

在 Vue 中可以通过结合 CSS Transition 和自定义指令实现滚动动画效果。定义一个指令监听元素的滚动位置，动态添加 CSS 类触发过渡效果。

<template>
  <div v-scroll-animation class="animated-element"></div>
</template>

<script>
export default {
  directives: {
    'scroll-animation': {
      inserted(el) {
        window.addEventListener('scroll', () => {
          const rect = el.getBoundingClientRect();
          if (rect.top < window.innerHeight * 0.8) {
            el.classList.add('animate');
          }
        });
      }
    }
  }
}
</script>

<style>
.animated-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
}

.animated-element.animate {
  opacity: 1;
  transform: translateY(0);
}
</style>

使用 Intersection Observer API

Intersection Observer API 提供更高效的元素可见性检测方式，适合实现滚动触发的动画效果。

<template>
  <div ref="animateElement" class="fade-in"></div>
</template>

<script>
export default {
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('active');
        }
      });
    }, { threshold: 0.1 });

    observer.observe(this.$refs.animateElement);
  }
}
</script>

<style>
.fade-in {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.6s ease-out;
}

.fade-in.active {
  opacity: 1;
  transform: translateX(0);
}
</style>

使用第三方库（如 AOS）

AOS (Animate On Scroll) 是一个流行的滚动动画库，可以快速实现各种滚动动画效果。

安装 AOS：

npm install aos --save

在 Vue 中使用：

<template>
  <div data-aos="fade-up" data-aos-duration="1000">内容</div>
</template>

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

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

使用 Vue Transition 组件

Vue 内置的 Transition 组件可以与滚动事件结合，实现元素进入/离开时的动画效果。

<template>
  <Transition name="fade">
    <div v-if="show" class="box"></div>
  </Transition>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.show = window.scrollY > 100;
    }
  }
}
</script>

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