【愚公系列】《循序渐进Vue.js 3.x前端开发实践》037-使用CSS3创建动画（transition过渡动画）

愚公搬代码

发布于 2025-06-02 17:45:58

14200

代码可运行

文章被收录于专栏：循序渐进Vue.js 3.x前端开发实践循序渐进Vue.js 3.x前端开发实践

运行总次数：0

代码可运行

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在现代 web 开发中，动画效果不仅能够提升用户体验，还能为网页增添活力与趣味。随着 CSS3 的普及，创建动画变得更加简单和灵活。特别是 CSS3 的过渡动画（Transition），为开发者提供了一种直观易用的方式，用于实现元素状态变化时的平滑过渡效果。

本篇文章将带你深入探索 CSS3 的过渡动画，帮助你理解其基本概念和用法。我们将介绍如何通过简单的 CSS 代码，为网页中的元素添加动感效果，包括颜色变化、位置移动、大小调整等。通过具体的示例和实践，你将掌握如何使用过渡属性来实现流畅的用户交互体验。

🚀一、使用CSS3创建动画（transition过渡动画）

🔎1. HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Transition过渡</title>
</head>
<body>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: red;
            transition-property: width, height, background-color;
            transition-duration: 1s;
            transition-timing-function: linear;
            transition-delay: 2s;
        }
        .demo-ani {
            width: 200px;
            height: 200px;
            background-color: blue;
            transition: width 2s, height 2s, background-color 2s;
        }
    </style>
    <div id="Application">
        <div :class="cls" @click="run"></div>
    </div>
    <script>
        const App = Vue.createApp({
            setup() {
                const cls = Vue.ref("demo") // 初始化cls为"demo"类名
                const run = () => {
                    if (cls.value == "demo") {
                        cls.value = "demo-ani" // 点击时切换为demo-ani类
                    } else {
                        cls.value = "demo" // 如果已经是demo-ani，点击时切换回demo
                    }
                }
                return { cls, run }
            }
        })
        App.mount("#Application")
    </script>
</body>
</html>

🔎2. 代码解析

🦋2.1 Vue 应用结构

Vue 引入：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

这是 Vue 3 的 CDN 引入，使用 vue.global.js 来获取 Vue 的全局版本。

根元素 #Application：

<div id="Application">
    <div :class="cls" @click="run"></div>
</div>

id="Application"：这个元素是 Vue 应用挂载的目标。
内部有一个 div，该 div 的类名绑定到 Vue 实例中的 cls 变量。当该 div 被点击时，会调用 run 方法。

🦋2.2 CSS 部分

demo 类：

.demo {
    width: 100px;
    height: 100px;
    background-color: red;
    transition-property: width, height, background-color;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

width, height, background-color：定义了元素的初始样式，元素是一个 100px × 100px 的红色方块。
transition-property：指定了哪些 CSS 属性会触发过渡效果。这里是 width、height 和 background-color。
transition-duration：过渡动画的持续时间为 1 秒。
transition-timing-function：过渡动画的时间函数是线性的，表示动画速度是均匀的。
transition-delay：延迟 2 秒后才会开始过渡。

demo-ani 类：

.demo-ani {
    width: 200px;
    height: 200px;
    background-color: blue;
    transition: width 2s, height 2s, background-color 2s;
}

width, height, background-color：定义了当点击后元素的目标样式，变成 200px × 200px 的蓝色方块。
transition：这里的过渡效果定义了三个属性的过渡，且持续时间为 2 秒。

🦋2.3 Vue 组合式 API 部分

const App = Vue.createApp({
    setup() {
        const cls = Vue.ref("demo") // 初始化cls为"demo"类名
        const run = () => {
            if (cls.value == "demo") {
                cls.value = "demo-ani" // 点击时切换为demo-ani类
            } else {
                cls.value = "demo" // 如果已经是demo-ani，点击时切换回demo
            }
        }
        return { cls, run }
    }
})
App.mount("#Application")

解析：

setup() 函数：这是 Vue 3 组合式 API 的核心部分，用于设置组件的响应式状态、方法和生命周期钩子。

cls 变量：

const cls = Vue.ref("demo")

cls 是一个响应式的引用（Vue.ref()），初始值是 "demo"。这个变量控制 div 元素的类名，初始为 demo。
由于 cls 是响应式的，Vue 会自动追踪它的变化，并更新绑定的 DOM 元素的类名。

run() 方法：

const run = () => {
    if (cls.value == "demo") {
        cls.value = "demo-ani" // 点击时切换为demo-ani类
    } else {
        cls.value = "demo" // 如果已经是demo-ani，点击时切换回demo
    }
}

run 方法在点击元素时触发。它根据 cls 的当前值来决定是切换到 demo-ani 还是切换回 demo。
cls.value 的变化会导致 div 元素的类名变化，从而触发 CSS 中定义的过渡效果。

挂载应用：

App.mount("#Application")

最后，Vue 应用挂载到页面中的 #Application 元素上。

🔎3. 交互流程

初始状态：页面加载时，div 元素的类名是 demo，因此它显示为一个 100px × 100px 的红色方块。
点击事件：当用户点击这个方块时，run() 方法会被触发。根据当前的类名，cls 的值会在 demo 和 demo-ani 之间切换。
过渡效果：
- 如果 cls 从 demo 切换到 demo-ani，元素的大小会从 100px × 100px 过渡到 200px × 200px，颜色从红色过渡到蓝色，过渡时间为 2 秒。
- 如果 cls 从 demo-ani 切换回 demo，会出现相反的过渡效果。