vue实现首页动画

Vue实现首页动画的方法

使用CSS过渡和动画

Vue内置了过渡和动画的支持，通过<transition>和<transition-group>组件可以轻松实现元素进入和离开的动画效果。

<transition name="fade">
  <div v-if="show">Hello World</div>
</transition>

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

使用第三方动画库

引入如Animate.css等CSS动画库可以快速实现丰富的动画效果。

<transition
  enter-active-class="animate__animated animate__bounceIn"
  leave-active-class="animate__animated animate__bounceOut"
>
  <div v-if="show">Animated Element</div>
</transition>

使用GSAP实现复杂动画

GSAP是一个强大的JavaScript动画库，适合实现复杂的序列动画和交互式动画。

import { gsap } from 'gsap'

export default {
  mounted() {
    gsap.to('.element', {
      duration: 1,
      x: 100,
      opacity: 1,
      ease: 'power2.out'
    })
  }
}

使用Vue的钩子函数控制动画

Vue的过渡系统提供了JavaScript钩子，可以更精细地控制动画流程。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <div v-if="show">Custom Animation</div>
</transition>

methods: {
  beforeEnter(el) {
    el.style.opacity = 0
  },
  enter(el, done) {
    gsap.to(el, {
      opacity: 1,
      duration: 0.5,
      onComplete: done
    })
  },
  leave(el, done) {
    gsap.to(el, {
      opacity: 0,
      duration: 0.5,
      onComplete: done
    })
  }
}

实现页面滚动动画

结合ScrollTrigger可以实现滚动触发的视差动画效果。

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

export default {
  mounted() {
    gsap.to('.parallax-element', {
      scrollTrigger: {
        trigger: '.container',
        start: 'top center',
        end: 'bottom center',
        scrub: true
      },
      y: -100,
      opacity: 1
    })
  }
}

使用Vue的组件状态驱动动画

通过绑定组件的data属性到动画属性，实现数据驱动的动态效果。

<div 
  :style="{
    transform: `scale(${scale})`,
    opacity: opacity
  }"
  @mouseover="hoverAnimation"
>
  Hover Me
</div>

data() {
  return {
    scale: 1,
    opacity: 0.8
  }
},
methods: {
  hoverAnimation() {
    gsap.to(this, {
      duration: 0.3,
      scale: 1.2,
      opacity: 1
    })
  }
}

实现SVG路径动画

使用GSAP可以创建流畅的SVG路径绘制动画。

gsap.fromTo('#path', 
  { drawSVG: '0%' }, 
  { drawSVG: '100%', duration: 2 }
)

响应式动画设计

结合Vue的计算属性和CSS变量，创建响应不同屏幕尺寸的动画。

:root {
  --anim-duration: 1s;
}

@media (max-width: 768px) {
  :root {
    --anim-duration: 0.5s;
  }
}

<div 
  class="animated-element"
  :style="{ '--duration': computedDuration }"
></div>

computed: {
  computedDuration() {
    return this.$store.state.isMobile ? '0.5s' : '1s'
  }
}