码云 Vue3教程 2021-06-02

38. [动画]用Vue进行控制CSS制作的过渡效果

AI 概述

上节用 CSS 制作了动画，然后用 Vue 的机制来进行控制，本文我们再来看一下过渡效果的制作和控制。直接开始今天的编码环节。编写 CSS 样式实现基本过渡样式新建一个文件Demo38.html，复制Base.html文件的基础代码到新文件中。我们先写一段 CSS 样式代码。代码中我们先建立了一个transition的样式，这个样式用来执行...

上节用 CSS 制作了动画，然后用 Vue 的机制来进行控制，本文我们再来看一下过渡效果的制作和控制。直接开始今天的编码环节。

编写 CSS 样式实现基本过渡样式

新建一个文件Demo38.html，复制Base.html文件的基础代码到新文件中。我们先写一段 CSS 样式代码。

代码中我们先建立了一个transition的样式，这个样式用来执行过渡效果，具体意思是如果背景颜色background-color有变化时，我们要在 3 秒种完成过渡（变化），并且效果是由慢到快进行的，此部分的关键词是ease。

然后再编写两个样式red和yellow，用来定义背景颜色，颜色分部是红色和黄色。所以就有了下面这些代码。

<style>
    .transition {
        transition: 3s background-color ease;
    }

    .red {
        background-color: red;
    }

    .yellow {
        background-color: yellow;
    }
</style>

有了这些 CSS 样式后，CSS 样式的代码就基本够用了。接下来我们需要写一些代码，来控制这些 CSS 过渡效果。

Vue 控制过渡效果

要用 Vue 控制过渡效果，需要先编写一个按钮，然后用按钮实现颜色的变化。这里的按钮提前绑定了点击事件hanldClick。这个事件等我们写完数据项再进行编写。

template: `
    <div :class="css">码云笔记前端博客</div>
    <button @click="hanldClick">切换颜色</button>
`

然后来声明数据项，因为一切都是数据驱动的，所以有数据才能实现控制。

data() {
    return {
        css: {
            transition: true,
            red: true,
            yellow: false
        }
    }
},

有了数据后，在模板中进行绑定数据。

<div :class="css">技术胖讲程序</div>

绑定成功后，这时候到浏览器预览应该 DIV 的背景色是红色的。现在点击按钮后，还没有对应的响应事件，所以我们需要编写一个响应事件。

methods: {
    hanldClick() {
        this.css.red = !this.css.red
        this.css.yellow = !this.css.yellow
    }
},

响应事件名字为hanldClick，然后我们对颜色属性进行取反，就完成了这种过渡效果。现在可以到浏览器中点击按钮，来看一下，最终的效果，这样就实现了过渡的切换。

我们通过两节的学习，讲清楚了动画和过渡的区别，也学习了 CSS 动画和过渡效果如何用 Vue 来进行控制。小伙伴们下去可以练习一下。

为了方便大家学习，附上源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mybj</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                css: {
                    transition: true,
                    red: true,
                    yellow: false
                }
            }
        },
        methods: {
            hanldClick() {
                this.css.red = !this.css.red
                this.css.yellow = !this.css.yellow
            }
        },
        template: `
            <div :class="css">码云笔记前端博客</div>
            <button @click="hanldClick">切换颜色</button>
        `
    })
    const vm = app.mount("#app")
</script>
<style>
    .transition {
        transition: 3s background-color ease;
    }

    .red {
        background-color: red;
    }

    .yellow {
        background-color: yellow;
    }
</style>

以上关于38. [动画]用Vue进行控制CSS制作的过渡效果的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 38. [动画]用Vue进行控制CSS制作的过渡效果