[Vue] 25.Vue.js过渡与动画：使用transition标签实现单元素/组件的过渡和动画效果

weiweicn!

已于 2022-07-01 18:27:13 修改

阅读量471

点赞数

分类专栏： Vue 文章标签： vue.js 动画前端

于 2022-07-01 16:39:19 首次发布

本文链接：https://blog.csdn.net/u014627255/article/details/125561090

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、单元素/组件的入场/出场动画：

什么是入场：元素从隐藏变成为展示
什么是出场：元素从展示变成隐藏
入场
1）vue提供了transition标签

template: `
            <div>
                <transition>
                    <div v-if="show">hello world</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
            `

2）需要配合样式使用transition：
v-enter-from: 入场最初的效果
v-enter-active：入场动画/过渡的执行过程中，动画/过渡效果是什么样的
v-enter-to：入场最终效果
v-leave-from: 内容将要离开还没有离开的时候的效果
v-leave-active: 出场效果怎么执行的
v-leave-to: 离开页面的最终透明度

单个标签入场/出场过渡效果完整代码：

<!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">
    <title>24</title>
    <style>
        .v-enter-from {
            opacity: 0;
        }
        .v-enter-active {
            transition: opacity 3s ease-out;
        }
        .v-enter-to {
            opacity: 1;
        }
        .v-leave-from {
            opacity: 1;
        }
        .v-leave-active {
            transition: opacity 3s ease-out;
        }
        .v-leave-to {
            opacity: 0;
        }

    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // 单元素，单组件的入场出场动画 
        const app = Vue.createApp({
            data() {
                return {
                    show: true
                }
            },
            methods: {
                handleClick() {
                    this.show = !this.show
                }
            },
            template: `
            <div>
                <transition>
                    <div v-if="show">hello world</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
            `
        });
        const vm = app.mount('#root')
    </script> 
</body>
</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">
    <title>24</title>
    <style>
        @keyframes shake {
            0% {
                transform: translateX(-100px);
            }
            50% {
                transform: translateX(-50px);
            }
            100% {
                transform: translateX(50px)
            }
        }
        .v-leave-active {
            animation: shake 3s;
        }
        .v-enter-active {
            animation: shake 3s;
        }

    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // 单元素，单组件的入场出场动画 
        const app = Vue.createApp({
            data() {
                return {
                    show: true
                }
            },
            methods: {
                handleClick() {
                    this.show = !this.show
                }
            },
            template: `
            <div>
                <transition>
                    <div v-if="show">hello world</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
            `
        });
        const vm = app.mount('#root')
    </script> 
</body>
</html>