vue动画实现全屏滚动

实现全屏滚动动画的Vue方案

使用vue-fullpage.js插件

安装vue-fullpage.js插件能快速实现全屏滚动效果：

npm install vue-fullpage.js

注册插件并配置基础选项：

import VueFullPage from 'vue-fullpage.js'

Vue.use(VueFullPage)

new Vue({
  el: '#app',
  data: {
    options: {
      navigation: true,
      anchors: ['section1', 'section2'],
      sectionsColor: ['#41b883', '#ff5f45']
    }
  }
})

模板结构示例：

<full-page :options="options">
  <div class="section">第一屏内容</div>
  <div class="section">第二屏内容</div>
</full-page>

自定义CSS过渡动画

通过Vue的transition组件结合CSS实现：

定义过渡样式：

.slide-enter-active, .slide-leave-active {
  transition: all 1s ease;
}
.slide-enter {
  transform: translateY(100%);
}
.slide-leave-to {
  transform: translateY(-100%);
}

组件实现逻辑：

export default {
  data() {
    return {
      currentIndex: 0,
      sections: [/* 各屏数据 */],
      isTransitioning: false
    }
  },
  methods: {
    goToSection(index) {
      if (!this.isTransitioning) {
        this.isTransitioning = true
        this.currentIndex = index
        setTimeout(() => {
          this.isTransitioning = false
        }, 1000)
      }
    }
  }
}

结合GSAP实现高级动画

安装GSAP库增强动画效果：

npm install gsap

创建动画控制器：

import { gsap } from 'gsap'

export default {
  methods: {
    animateSection(direction) {
      const tl = gsap.timeline()
      tl.to('.current-section', {
        duration: 1,
        y: direction === 'down' ? '-100%' : '100%',
        ease: 'power3.inOut'
      })
      .from('.next-section', {
        duration: 1,
        y: direction === 'down' ? '100%' : '-100%',
        ease: 'power3.inOut'
      }, 0)
    }
  }
}

响应式处理

添加窗口尺寸监听确保全屏适配：

mounted() {
  window.addEventListener('resize', this.handleResize)
  this.setSectionHeight()
},
methods: {
  setSectionHeight() {
    const height = window.innerHeight + 'px'
    document.querySelectorAll('.section').forEach(el => {
      el.style.height = height
    })
  },
  handleResize() {
    debounce(this.setSectionHeight, 100)
  }
}

滚动事件处理

实现鼠标滚轮和触摸事件控制：

handleWheel(event) {
  if (event.deltaY > 0) {
    this.scrollDown()
  } else {
    this.scrollUp()
  }
},
scrollDown() {
  if (this.currentIndex < this.totalSections - 1) {
    this.currentIndex++
    this.animateSection('down')
  }
}

性能优化建议

1. 使用will-change属性提升动画性能

   .section {
   will-change: transform;
   backface-visibility: hidden;
   }

2. 对复杂内容进行硬件加速

   .content {
   transform: translateZ(0);
   }

3. 节流滚动事件处理

   import { throttle } from 'lodash'
   this.throttledScroll = throttle(this.handleScroll, 300)

以上方案可根据项目需求组合使用，vue-fullpage.js适合快速实现，自定义方案则提供更大灵活性。注意在移动端需要额外处理触摸事件和性能优化。