动画库集成

使用第三方动画库可以快速实现专业效果，无需手写复杂的 CSS。常用的有 Animate.css、Velocity.js、GSAP 等。

Animate.css

Animate.css 是最流行的 CSS 动画库，提供大量预设动画。

安装

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

或 npm 安装：

npm install animate.css

import 'animate.css'

基本使用

<transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">Hello Animate.css!</div>
</transition>

注意：Animate.css 4.x 版本需要添加 animate__ 前缀。

常用动画类

淡入淡出：
animate__fadeIn, animate__fadeOut
animate__fadeInUp, animate__fadeOutDown
animate__fadeInLeft, animate__fadeOutRight

弹跳：
animate__bounceIn, animate__bounceOut
animate__bounceInUp, animate__bounceOutDown

缩放：
animate__zoomIn, animate__zoomOut
animate__zoomInDown, animate__zoomOutUp

旋转：
animate__rotateIn, animate__rotateOut
animate__rotateInDownLeft, animate__rotateOutDownRight

滑动：
animate__slideInLeft, animate__slideOutRight
animate__slideInUp, animate__slideOutDown

特殊：
animate__shakeX, animate__shakeY
animate__headShake, animate__swing
animate__wobble, animate__jello

自定义动画时长

<transition
  enter-active-class="animate__animated animate__fadeIn animate__faster"
  leave-active-class="animate__animated animate__fadeOut animate__slow"
>
  <div v-if="show">内容</div>
</transition>

速度类：

• animate__slower (3s)
• animate__slow (2s)
• animate__fast (0.8s)
• animate__faster (0.5s)

延迟动画

<transition
  enter-active-class="animate__animated animate__fadeIn animate__delay-1s"
>
  <div v-if="show">延迟1秒进入</div>
</transition>

延迟类：animate__delay-1s 到 animate__delay-5s

重复动画

<transition
  enter-active-class="animate__animated animate__fadeIn animate__repeat-2"
>
  <div v-if="show">重复2次</div>
</transition>

Velocity.js

Velocity 是高性能的 JavaScript 动画库，适合复杂动画。

安装

npm install velocity-animate

基本使用

<transition
  @enter="enter"
  @leave="leave"
  :css="false"
>
  <div v-if="show">Velocity 动画</div>
</transition>

<script>
import Velocity from 'velocity-animate'

new Vue({
  methods: {
    enter(el, done) {
      Velocity(el, {
        opacity: 1,
        translateX: ['0px', '100px']
      }, {
        duration: 500,
        easing: 'ease-out',
        complete: done
      })
    },
    leave(el, done) {
      Velocity(el, {
        opacity: 0,
        translateX: '-100px'
      }, {
        duration: 500,
        complete: done
      })
    }
  }
})
</script>

注册效果

Velocity.RegisterEffect('transition.slideUpIn', {
  defaultDuration: 500,
  calls: [
    [{ opacity: [1, 0], translateY: [0, 20] }]
  ]
})

Velocity.RegisterEffect('transition.slideDownOut', {
  defaultDuration: 500,
  calls: [
    [{ opacity: [0, 1], translateY: [20, 0] }]
  ]
})

使用注册效果：

methods: {
  enter(el, done) {
    Velocity(el, 'transition.slideUpIn', { complete: done })
  },
  leave(el, done) {
    Velocity(el, 'transition.slideDownOut', { complete: done })
  }
}

GSAP

GSAP (GreenSock Animation Platform) 是功能最强大的动画库。

安装

npm install gsap

基本使用

<transition
  @enter="enter"
  @leave="leave"
  :css="false"
>
  <div v-if="show">GSAP 动画</div>
</transition>

<script>
import { gsap } from 'gsap'

new Vue({
  methods: {
    enter(el, done) {
      gsap.from(el, {
        opacity: 0,
        y: 50,
        duration: 0.5,
        ease: 'power2.out',
        onComplete: done
      })
    },
    leave(el, done) {
      gsap.to(el, {
        opacity: 0,
        y: -50,
        duration: 0.5,
        onComplete: done
      })
    }
  }
})
</script>

时间线动画

import { gsap } from 'gsap'

methods: {
  enter(el, done) {
    const tl = gsap.timeline({ onComplete: done })
    
    tl.from(el, {
      opacity: 0,
      scale: 0.5,
      duration: 0.3
    })
    .to(el, {
      scale: 1.1,
      duration: 0.2
    })
    .to(el, {
      scale: 1,
      duration: 0.2
    })
  }
}

交错动画

methods: {
  enter(el, done) {
    const items = el.querySelectorAll('.item')
    
    gsap.from(items, {
      opacity: 0,
      y: 30,
      duration: 0.5,
      stagger: 0.1,
      onComplete: done
    })
  }
}

完整示例

结合 Animate.css 的通知组件：

<div id="app">
  <button @click="addNotification">添加通知</button>
  
  <div class="notifications">
    <transition-group
      name="notification"
      enter-active-class="animate__animated animate__fadeInRight"
      leave-active-class="animate__animated animate__fadeOutRight"
    >
      <div 
        v-for="notification in notifications" 
        :key="notification.id"
        class="notification"
        :class="notification.type"
      >
        {{ notification.message }}
        <button @click="removeNotification(notification.id)">×</button>
      </div>
    </transition-group>
  </div>
</div>

<style>
.notifications {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 300px;
}

.notification {
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification.success { background: #d4edda; color: #155724; }
.notification.error { background: #f8d7da; color: #721c24; }
.notification.warning { background: #fff3cd; color: #856404; }
</style>

<script>
new Vue({
  el: '#app',
  data: {
    notifications: [],
    nextId: 1
  },
  methods: {
    addNotification() {
      const types = ['success', 'error', 'warning']
      const messages = ['操作成功', '操作失败', '请注意']
      const type = types[Math.floor(Math.random() * types.length)]
      
      const notification = {
        id: this.nextId++,
        message: messages[types.indexOf(type)],
        type: type
      }
      
      this.notifications.push(notification)
      
      setTimeout(() => {
        this.removeNotification(notification.id)
      }, 3000)
    },
    removeNotification(id) {
      const index = this.notifications.findIndex(n => n.id === id)
      if (index !== -1) {
        this.notifications.splice(index, 1)
      }
    }
  }
})
</script>

选择建议

动画库可以大大提高开发效率。接下来学习列表过渡，处理 v-for 的动画效果。