Vue3 过渡动画轻松上手：10 分钟速成指南

2023-10-11 03:04:19

写在前面

动画效果在现代 Web 开发中扮演着至关重要的角色，它可以增强用户界面，提供无缝的交互体验。Vue.js，作为一个流行的 JavaScript 框架，提供了一套强大的工具，可以轻松实现动画效果。在这篇文章中，我们将深入探究 Vue3 中的过渡动画，并提供一个快速上手的 10 分钟指南，让你快速掌握过渡动画的精髓。

Vue3 中的过渡动画

Vue3 中的过渡动画基于 CSS 过渡和动画，但它提供了一种更方便、更声明式的语法来定义和控制这些效果。通过使用 <transition> 组件和 transition API，你可以轻松地在组件之间创建平滑、流畅的过渡效果。

入门指南：10 分钟快速上手

步骤 1：安装 Vue3

如果你还没有安装 Vue3，请先使用以下命令安装：

npm install vue@3

步骤 2：创建 Vue3 项目

创建一个新的 Vue3 项目，并创建一个名为 main.js 的入口文件。

步骤 3：导入 <transition> 组件

在 main.js 中，导入 <transition> 组件：

import { createApp } from 'vue';
import { Transition } from 'vue';

const app = createApp({});
app.component('MyTransition', Transition);

步骤 4：创建过渡动画

在模板中，包裹需要添加过渡效果的元素，并指定过渡的类型和持续时间：

<template>
  <transition name="fade">
    <div>Hello, world!</div>
  </transition>
</template>

在这个示例中，当 <div> 元素被添加或移除时，它将执行一个淡入淡出的过渡效果。

步骤 5：自定义过渡

你可以使用 transition API 进一步自定义过渡动画：

app.component('MyTransition', {
  transition: {
    duration: 500,
    css: false,
    mode: 'out-in'
  }
});

duration：指定过渡的持续时间（以毫秒为单位）
css：如果为 true，则使用 CSS 过渡；如果为 false，则使用 JavaScript 动画
mode：指定过渡的模式，可以是 in-out、out-in 或 both

步骤 6：创建 CSS 过渡

如果你选择使用 CSS 过渡，你需要在 CSS 文件中定义过渡的实际效果：

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

步骤 7：探索其他过渡类型

Vue3 提供了多种预定义的过渡类型，包括：

fade：淡入淡出
scale：缩放
slide：滑动
collapse：折叠
custom：自定义过渡

步骤 8：创建状态过渡

你可以使用状态过渡来响应组件状态的变化：

<transition
  :enter-active-class="'animated fadeIn'"
  :leave-active-class="'animated fadeOut'"
>
  <div>{{ count }}</div>
</transition>

步骤 9：添加 CSS 动画类

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.fadeIn {
  animation-name: fadeIn;
}
.fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}