Vue 实现动画效果的多种方案

约 1371 字大约 5 分钟

Vue

2025-04-20

Vue开发者调试工具

vue-devtools是基于Google Chrome浏览器的一个用于调试Vue应用的开发者浏览器扩展

https://github.com/vuejs/devtools-v6

动态样式绑定

<div :class="className">字符串写法</div>
<div :class="{class2:true,class3:false}">对象写法</div>
<div :class="[class1,class2]">数组写法</div>
<div :class="[class1,class2,{class3:true}]">数组写法</div>

过渡&动画

过渡动画

基于CSS样式实现的动画效果，开发者需要编写自定义动画样式，样式名不能随意命名，需要遵循一定的规则标准，划分为开始动画和结束动画。

开始动画类名主要只有三个，v-enter-from（进入动画起始），v-enter-active（进入动画生效），v-enter-to（进入动画结束）；

结束动画的类名与开始动画类名是对应的，

主要有三个，v-leave-from（离开动画起始），v-leave-active（离开动画生效），v-leave-to（离开动结束）

动画类名中的V指的是用户自定义的动画样式类名，而不是字面意义上的字母V。

简单示例：

<script setup>
import { ref } from 'vue';
const isShow = ref(false);
</script>

<template>
  <button @click="isShow = !isShow" style="position: absolute;top: 100px;left: 100px;">点击</button>
  <transition name="fade">
    <div class="box" v-show="isShow">
      <h1>Hello World</h1>
    </div>
  </transition>
</template>

<style scoped>
.fade-enter-from{
  opacity: 0;
  transform: translateX(-100px);
}
.fade-enter-active{
  transition: opacity 0.5s, transform 0.5s;
}
.fade-enter-to{
  opacity: 1;
  transform: translateX(0);
}

.fade-leave-from{
  opacity: 1;
  transform: translateX(0);
}
.fade-leave-active{
  transition: opacity 0.5s, transform 0.5s;
}
.fade-leave-to{
  opacity: 0;
  transform: translateX(100px);
}
</style>

逐帧动画

CSS的过渡动画只能实现开始与结束的动画效果，而animation动画却可以实现更丰富、更细腻的动画效果。不过对于Vue来说，不管是过渡动画还是逐帧动画，用户都是利用6个样式类来实现

<script setup>
import { ref } from 'vue';
const isShow = ref(false);
</script>

<template>
  <button @click="isShow = !isShow" style="position: absolute;top: 100px;left: 100px;">点击</button>
  <transition name="fade">
    <div class="box" v-show="isShow">
      <h1>Hello World</h1>
    </div>
  </transition>
</template>

<style scoped>

.fade-enter-active{
  animation: fade-in 0.5s;
}

.fade-leave-active{
  animation: fade-out 0.5s;
}
@keyframes fade-in{
  0%{
    opacity: 0;
    transform: translateX(-100px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fade-out{
  0%{
    opacity: 1;
    transform: translateX(0);
  }
  100%{
    opacity: 0;
    transform: translateX(100px);
  }
}
</style>

第三方动画库

https://github.com/animate-css/animate.css

JavaScript动画

除了使用CSS实现动画效果，还支持JavaScript的操作实现，transition组件还提供了8个有关JavaScript的动画钩子函数，

钩子函数包括两个参数，即el和done，其中，el是要操作的目标元素，done是一个函数，代表过渡是否结束。

<script setup>
import { ref } from 'vue';
const isShow = ref(false);

const beforeEnter = (el) => {
  console.log('进入动画开始前');
  el.style.opacity = 0;
  el.style.transform = 'translateX(-100px)';
}

const enter = (el, done) => {
  console.log('进入动画进行中');
  let start = null;
  const animate = (timestamp) => {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    const opacity = Math.min(progress / 500, 1);
    const translateX = -100 + (100 * opacity);
    
    el.style.opacity = opacity;
    el.style.transform = `translateX(${translateX}px)`;
    
    if (progress < 500) {
      requestAnimationFrame(animate);
    } else {
      done();
    }
  }
  requestAnimationFrame(animate);
}

const afterEnter = (el) => {
  console.log('进入动画结束后');
  el.style.opacity = 1;
  el.style.transform = 'translateX(0)';
}

const enterCancelled = (el) => {
  console.log('进入动画被取消');
}

const beforeLeave = (el) => {
  console.log('离开动画开始前');
  el.style.opacity = 1;
  el.style.transform = 'translateX(0)';
}

const leave = (el, done) => {
  console.log('离开动画进行中');
  let start = null;
  const animate = (timestamp) => {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    const opacity = 1 - Math.min(progress / 500, 1);
    const translateX = 100 * (1 - opacity);
    
    el.style.opacity = opacity;
    el.style.transform = `translateX(${translateX}px)`;
    
    if (progress < 500) {
      requestAnimationFrame(animate);
    } else {
      done();
    }
  }
  requestAnimationFrame(animate);
}

const afterLeave = (el) => {
  console.log('离开动画结束后');
  el.style.opacity = 0;
  el.style.transform = 'translateX(100px)';
}

const leaveCancelled = (el) => {
  console.log('离开动画被取消');
}
</script>

<template>
  <button @click="isShow = !isShow" style="position: absolute;top: 100px;left: 100px;">点击</button>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @enter-cancelled="enterCancelled"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    @leave-cancelled="leaveCancelled"
  >
    <div class="box" v-show="isShow">
      <h1>Hello World</h1>
    </div>
  </transition>
</template>

<style scoped>
.box {
  position: absolute;
  top: 200px;
  left: 100px;
}
</style>

requestAnimationFrame 是一个浏览器提供的 API，用于优化动画性能。

主要作用

告诉浏览器你希望执行一个动画
请求浏览器在下次重绘之前调用指定的回调函数
通常用于实现流畅的动画效果

在实际开发中，CSS 动画比 JavaScript 动画使用得更广泛

JavaScript 动画主要用于以下场景：

需要精确控制动画过程
需要与用户交互实时响应的动画
复杂的动画逻辑（如游戏、物理效果）
需要动态计算动画参数的情况

多元素分组动画

必须设置 tag 属性来指定渲染的标签

每个子元素必须设置唯一的 key 属性

三种动画状态

进入动画（.list-enter-active）
离开动画（.list-leave-active）
移动动画（.list-move）

<script setup>
import { ref } from 'vue';

const list = ref([
  { id: 1, text: '项目 1' },
  { id: 2, text: '项目 2' },
  { id: 3, text: '项目 3' }
]);

let nextId = 4;

const addItem = () => {
  list.value.push({
    id: nextId++,
    text: `项目 ${nextId - 1}`
  });
};

const removeItem = (id) => {
  const index = list.value.findIndex(item => item.id === id);
  if (index !== -1) {
    list.value.splice(index, 1);
  }
};
</script>

<template>
  <div class="container">
    <button @click="addItem" class="btn">添加项目</button>
    
    <transition-group name="list" tag="ul" class="list">
      <li v-for="item in list" 
          :key="item.id" 
          class="list-item"
          @click="removeItem(item.id)">
        {{ item.text }}
      </li>
    </transition-group>
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
}

.btn {
  padding: 8px 16px;
  margin-bottom: 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-item {
  padding: 10px;
  margin: 5px 0;
  background-color: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.list-item:hover {
  background-color: #e0e0e0;
}

/* 进入动画 */
.list-enter-active {
  animation: slide-in 0.5s ease-out;
}

/* 离开动画 */
.list-leave-active {
  animation: slide-out 0.5s ease-out;
  position: absolute;
}

/* 移动动画 */
.list-move {
  transition: transform 0.5s ease;
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}
</style>