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

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

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

template: `
            <div>
                <transition>
                    <div v-if="show">hello world</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
            `
1
2
3
4
5
6
7
8

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>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

单个标签入场/出场动画效果如下代码：

<!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>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

相关阅读:
Android 数据库增删改查
 【Conda】Conda多环境管理和环境切换教程
 ffmpeg中examples编译报不兼容错误解决办法
 TResNet: ResNet改进，实现高精度的同时保持高 GPU 利用率
 java.lang.NoClassDefFoundError：com/fasterxml/jackson/core/JsonFactory
图像分块及拼接(二)python代码
 【SQL刷题】Day9----SQL过滤数据专项练习
 数据仓库及ETL的理论基础
 农林种植类VR虚拟仿真实验教学整体解决方案
 STM32-HAL库07-软件SPI驱动0.96寸OLED
原文地址：https://blog.csdn.net/u014627255/article/details/125561090