42. [动画]vue3过渡和动画并用小技巧

作者：文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197001.html

构建一个过渡和动画并用的代码
过渡和动画时长不一致的处理
属性控制动画和过渡时长

这节我们学习一下过渡和动画并用的一些可选择项和注意事项，特别时过渡和动画时长不一致时的处理策略。

构建一个过渡和动画并用的代码

新建一个文件Demo42.html，写上如下代码，因为下面代码都是之前章节写过的代码，这里不再重复解释，只是对 css 进行些修改而已，最终实现页面既有动画，又有过渡效果。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mybj</title>
    <style>
        @keyframes comein {
            0% {
                transform: translateX(-120px)
            }

            100% {
                transform: translateX(0px)
            }
        }

        @keyframes comeout {
            0% {
                transform: translateX(0px)
            }

            100% {
                transform: translateX(-120px)
            }
        }

        .v-enter-from,
        .v-leave-to {
            opacity: 0;
        }

        .v-enter-to,
        .v-leave-from {
            opacity: 1;
        }

        .v-enter-active {
            animation: comein 3s;
            transition: opacity 3s ease-out;
        }

        .v-leave-active {
            animation: comeout 3s;
            transition: opacity 3s ease-out;
        }
    </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>
        <button @click="hanldClick">切换动画</button>
        `
    })
    const vm = app.mount("#app")
</script>

为了查看方便，把过渡和动画的时间都变成 3 秒。然后到浏览器中进行查看，可以看到这时候过渡和动画都非常正常。

42. [动画]vue3过渡和动画并用小技巧 1

duration除了能写一个数字之外，还可以写对象进去，比如入场的时候 1 秒种，出厂的时候 3 秒钟，就可以这样写。

<transition :duration="{enter:1000,leave:3000}">

这就是动画和过渡同时使用时的一些控制选项和注意事项。下节我们学习一下用 JavaScript 配合 Vue3 来制作动画。

更多建站教程请访问 https://www.mimiwuqi.com/webqianduan/