VUE----transition-过度

最新推荐文章于 2024-07-02 16:56:38 发布

十友九

最新推荐文章于 2024-07-02 16:56:38 发布

阅读量131

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43778556/article/details/117385508

版权

VUE 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

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>

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>

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>

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>

十友九

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE----transition-过度

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">
复制链接

扫一扫

专栏目录