VUE----transition-过度_vue 每次点击增加30

作者：weixin_40725706 | 2024-04-05 05:55:00

踩

vue 每次点击增加30

1.transition-元素过度

<!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>Document</title>
    <script src="../vue.js"></script>
    <style>
        .kerwin-enter-active{
            animation: aaa 1.5s;
        }
        .kerwin-leave-active{
            animation: aaa 1.5s reverse;
        }
        @keyframes aaa{
            0%{
                opacity: 0;
                transform: translateX(100px);
            }
            100%{
                opacity: 1;
                transform: translateX(0px);
            }
        }
    </style>
</head>
<body>
    <div id="box">
        <!-- 单元素过度 -->
        <button @click="isShow=!isShow">click</button>
        <transition name="kerwin" appear>
            <div v-show="isShow">111111111111</div>
        </transition>
        <!-- 多元素过度 -->
        <transition name="kerwin" appear mode="out-in">
            <div v-if="isShow" key="111">111111111111</div>
            <div v-else key="222">22222222222</div>
        </transition>
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                isShow:true
            },
        })
    </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

2.transition-多组件过度

<!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>Document</title>
    <script src="../vue.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            /* align-items: center; */
            overflow: hidden;
        }
        ul,li{
           list-style: none;
           text-align: center; 
           width: 100%;
           background-color: aqua;
           /* padding: 10px; */
           line-height: 60px;
           box-sizing: border-box;
        }
        li:active{
           background-color: rgb(0, 255, 76);
        }
        ul{
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            bottom: 10px;
        }
        .kerwin-enter-active{
            animation: aaa 1.5s;
        }
        .kerwin-leave-active{
            animation: aaa 1.5s reverse;
        }
        @keyframes aaa{
            0%{
                opacity: 0;
                transform: translateX(100px);
            }
            100%{
                opacity: 1;
                transform: translateX(0px);
            }
        }
    </style>
</head>
<body>
    <!-- 
        <component></component>元素，动态地绑定多个组件到它的is属性
        <keep-alive></keep-alive>保留状态，避免重新渲染
     -->
    <div id="box">
        <keep-alive>
            <transition name="kerwin" mode="out-in">
                <component :is="isWhich"></component>
            </transition>
        </keep-alive>
        <footer>
            <ul>
                <li @click="isWhich='home'">首页</li>
                <li @click="isWhich='list'">列表</li>
                <li @click="isWhich='shopcar'">购物车</li>
            </ul>
        </footer>
    </div>
    <script>
        Vue.component('home',{
            template:
            `
            <div>
                home===<input type="text"/>
            </div>
            `
        })
        Vue.component('list',{
            template:
            `
            <div>
                list 
            </div>
            `
        })
        Vue.component('shopcar',{
            template:
            `
            <div>
                shopcar
            </div>
            `
        })
        new Vue({
            el:'#box',
            data:{
                isWhich:'home',
            },
            methods:{

            }
        })
    </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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

3.transition-多列表过度

<!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>Document</title>
    <script src="../vue.js"></script>
    <style>
        .kerwin-enter-active{
            animation: aaa 1.5s;
        }
        .kerwin-leave-active{
            animation: aaa 1.5s reverse;
        }
        @keyframes aaa{
            0%{
                opacity: 0;
                transform: translateX(100px);
            }
            100%{
                opacity: 1;
                transform: translateX(0px);
            }
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="text" v-model="mytext"/>
        <button @click="handleClick()">add</button>

        <!-- <div v-if="datalist.length===0">待办事项空空</div> -->
        <!-- <ul v-else> -->
            <transition-group name="kerwin" tag="ul">
                <li v-for="(data,index) in datalist" :key="data">
                    {{data}}
                    <button @click="handleDel(index)">del</button>
                </li>
            </transition-group>
        <!-- </ul> -->
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                mytext:'',
                datalist:[],
            },
            methods:{
                handleClick(){
                    this.datalist.push(this.mytext)
                    // 重置input
                    this.mytext=''
                },
                handleDel(myindex){
                    this.datalist.splice(myindex,1)
                }
            }
        })
    </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
59
60
61
62
63

4.transition-可复用过度

<!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>Document</title>
    <script src="../vue.js"></script>
    <style>
        .left-enter-active{
            animation: left 1.5s;
        }
        .left-leave-active{
            animation: left 1.5s reverse;
        }
        @keyframes left{
            0%{
                opacity: 0;
                transform: translateX(-100%);
            }
            100%{
                opacity: 1;
                transform: translateX(0px);
            }
        }
        .right-enter-active{
            animation: right 1.5s;
        }
        .right-leave-active{
            animation: right 1.5s reverse;
        }
        @keyframes right{
            0%{
                opacity: 0;
                transform: translateX(100px);
            }
            100%{
                opacity: 1;
                transform: translateX(0px);
            }
        }
    </style>
</head>
<body>
    <div id="box">
        <navbar @myevent="change"></navbar>
        <sidebar v-show="isShow" direction="right"></sidebar>
    </div>
    <script>
        Vue.component('navbar',{
            template:
            `
            <div style="background-color: yellow;">
                导航栏--<button @click="handleClick">click</button>
            </div>
            `,
            methods:{
                handleClick(){
                    this.$emit('myevent')
                }
            }
        })
        Vue.component('sidebar',{
            props:['direction'],
            template:
            `
            <transition :name="direction">
                <div style="background-color: blue;width: 200px;">
                    <ul>
                        <li>好友</li>
                        <li>设置</li>
                        <li>退出</li>
                    </ul>
                </div>
            </transition>
            `,
        })
        new Vue({
            el:'#box',
            data:{
                isShow:false,
            },
            methods:{
                change(){
                    this.isShow=!this.isShow
                }
            }
        })
    </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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/363758