码云 Vue3教程 2021-05-31

40. [动画]用Vue3制作过渡效果

AI 概述

准备基础文件增加过渡效果总结有了 39 节内容的学习，本节我们在它的基础上用 Vue 的内置组件，制作过渡效果。需求很简单，还是 DOM 元素的显示和隐藏，但不在是滑入效果，而是慢慢改变透明度opacity。准备基础文件新建一个Demo40.html，然后复制Demo39.html代码过来，并去掉关键帧keyframes样式，...

文章目录隐藏

准备基础文件
增加过渡效果
总结

有了 39 节内容的学习，本节我们在它的基础上用 Vue 的内置组件，制作过渡效果。需求很简单，还是 DOM 元素的显示和隐藏，但不在是滑入效果，而是慢慢改变透明度opacity。

准备基础文件

新建一个Demo40.html，然后复制Demo39.html代码过来，并去掉关键帧keyframes样式，但保留v-enter-active和v-leave-active。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mybj</title>
    <style>
        .v-enter-active{
            animation: comein 1s;
        }
    
        .v-leave-active{
            animation : comeout 1s;
        }
    </style>
    <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 {
                isShow:false
            }
        },
        methods:{
            hanldClick(){
                this.isShow= !this.isShow
            }
        },
        template: `
            <transition>
                <div v-if="isShow">码云笔记前端博客</div>
            </transition>
            <div><button @click="hanldClick">切换动画</button></div>
        `
    })
    const vm = app.mount("#app")
</script>

这时候的代码是没有任何过渡效果的，但是依然可以切换显示与隐藏效果。

增加过渡效果

上节我们说了v-enter-active和v-leave-active都是固定写法，但是我们需要告诉它执行的过渡效果是什么样子的，这样我们就需要再写两个固定的 css 样式，v-enter-from和v-enter-to。这两个样式就是控制进入前 DOM 的样式和进入完成时 DOM 的样子的。

<style>
    .v-enter-from{
        opacity: 0;
    }
    .v-enter-to{
        opacity: 1;
    }
    .v-enter-active{
        transition: opacity 3s ease-out;
    }
</style>

这时候到浏览器中预览一下，就有了进入时的透明度过渡效果。

但现在隐藏时是没有效果的，我们还需要制作一个隐藏效果。这时候也是两个固定的 CSS 选择器v-leave-from和v-leave-to，然后再编写离开时的执行效果v-leave-active。

<style>
    .v-leave-active{
        transition: opacity 3s ease-out;
    }
    .v-leave-from{
        opacity: 1;
    }
    .v-leave-to{
        opacity: 0;
    }
</style>

写完这些 CSS 样式，隐藏时就也有了动画效果。

目前这段 CSS 代码还是比较冗余的，我们可以简化一下。简化的原则就是把一样的值的选择器合并到一期，就得到了下面这样的代码。

<style>
    .v-enter-from , .v-leave-to{
        opacity: 0;
    }
    .v-enter-to , .v-leave-from{
        opacity: 1;
    }
    .v-enter-active , .v-leave-active{
        transition: opacity 3s ease-out;
    }
</style>

最后预览一下，效果还是可以实现的。

总结

本文我们主要学习了 Vue 过渡效果的制作。通过两节的学习你也可以大概知道 Vue 动画和过渡效果的套路了，就是利用固定的选择器，然后配合<transition>标签来现实。

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

「点点赞赏，手留余香」

赞 0 赏

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

微信

支付宝

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

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

码云 SVIP

分享到：

准备基础文件

增加过渡效果

总结

码云 SVIP

相关推荐

发表回复 取消回复

发表回复取消回复