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

举报
愚公搬代码 发表于 2025/02/28 23:25:30 2025/02/28
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳...
标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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 应用结构

  1. Vue 引入：

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    • 这是 Vue 3 的 CDN 引入，使用 vue.global.js 来获取 Vue 的全局版本。

  2. 根元素 #Application：

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

🦋2.2 CSS 部分

  1. 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 秒后才会开始过渡。

  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")

解析：

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

  2. cls 变量：

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

  3. 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 中定义的过渡效果。

  4. 挂载应用：

    App.mount("#Application")
    • 最后，Vue 应用挂载到页面中的 #Application 元素上。

🔎3. 交互流程

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

🔎4. 总结

这段代码通过 Vue 3 的组合式 API 实现了一个基本的交互式动画效果。点击 div 元素时，它的样式（大小、颜色）会根据定义的 CSS transition 属性过渡变化。主要步骤如下：

  1. 使用 Vue.ref() 创建响应式变量 cls 来控制 div 元素的类名。
  2. 点击 div 时切换 cls 的值，进而切换应用的类名。
  3. CSS 中的 transition 属性定义了过渡效果，使得样式的变化具有动画效果。

这是一种简单而直观的方式，展示了 Vue 与 CSS 动画的结合，适合用于学习 Vue 的响应式特性以及过渡动画的实现。

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
CSS JavaScript Vue
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入