（5）Vue基础4

Vue过渡和动画

前沿：过渡从一个状态向另一个状态变化的过程；动画是与过渡非常相似，只不过动画控制的过程更加细腻，更加精准。

过渡和动画基础

（一）过渡

（1）Vue为<transition>标签内部的元素提供3个进入过渡的类和3个离开的过渡的类。

v-enter 进度过渡的开始状态，作用于开始的第一帧进入前的那一刻，隐藏的状态
v-enter-active 进入过渡生效的状态，作用于整个过程进入整个过渡过程
v-enter-to 进入过渡的结束状态。作用于结束的一帧进入结束的一刻显示
v-leave 离开过渡的开始状态，作用于开始的一帧离开前的一刻显示
v-leave-active 离开过渡生效的开始状态，作用于整个过程　　显示的整个过程
v-leave-to 离开过渡的结束状态，作用于结束的一帧离开结束的那一刻，隐藏的状态

案例实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动画过渡</title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        .chart{width:200px; height: 50px; background-color: orange;}
        /*从有到无  离开状态*/
        .box-leave{width:200px;}
        .box-leave-active{transition:width 3s;}
        .box-leave-to{width:0;}

        /*从无到有，显示状态*/
        .box-enter{width:0;}
        .box-enter-active{transition: width 3s;}
        .box-enter-to{width:200px;}
    </style>    
</head>
<body>
    <div id="app">
        <button @click="toogle">切换状态</button>
        <transition name="box">
            <div class="chart" v-show="show"></div>
        </transition>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                show:true
            },
            methods:{
                toogle(){
                    this.show = !this.show
                }
            }
        })        
    </script>
</body>
</html>

View Code

（2）自定义类名：

（3）使用@keyframes创建CSS动画

案例解析：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>@keyframes创建CSS</title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        .circular{width: 100px; height: 100px; border-radius: 50%;background-color: red; margin-top: 20px; color:#fff;line-height: 100px; text-align: center; }
        .bounce-enter-active{animation: anmi 1s;}
        .bounce-leave-active{animation: anmi 1s reverse;}

        /*一开始显示，然后变成没有，从有到无 leave*/
        @keyframes anmi{
            /*相当于v-enter v-leave-to 隐藏状态*/
            0%{
                transform:scale(0);
                background:blue; 
            }
            50%{
                transform: scale(0.5);
            }
            /*相当于v-enter-to v-leave 显示状态*/
            100%{
                transform:scale(1);
                background:red; 
            }
        }
    </style>    
</head>
<body>
    <div id="app">
        <button @click="show = !show">改变样式</button>
        <transition name="bounce">
            <div class="circular" v-show="show"></div>
        </transition>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                show:true
            }
        })
    </script>
</body>
</html>

View Code

（二）多个元素过渡

（1）不同标签名元素过渡。同一个transition只能有一个元素实现过渡，如果是不同的标签过渡，可以使用v-if v-else选择过渡的标签。

（2）相同标签名元素过渡。当有相同的标签名的元素切换时，需要使用Key特性设置唯一值来标记，从而让Vue区分他们，因为Vue为了效率只会替换相同标签的内容。

（3）过渡模式。当新旧两个元素发生过渡时，发生的位置的偏移、闪动等情况需要更精细的设置。在transition里面加上mode="out-in"或者mode="in-out"。

案例解析：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多元素过渡</title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        .red, .green, .orange{height:20px; width:200px;}
        .red{background-color: red;}
        .green{background-color: green;}
        .orange{background-color: orange;}
        /*过渡的效果*/
        .row-enter{width:0;}
        .row-enter-active{transition:width 3s;}
        .row-enter-to{width:200px;}
    </style>
</head>
<body>
<div id="app">
    <!-- 不同标签名实现切换 -->
    <transition>
        <ul v-if="item.length >0 ">
            <li>选项1</li>
            <li>选项2</li>
        </ul>
        <p v-else>我是P标签的内容</p>
    </transition>
    <!-- 相同标签名实现切换1  要绑定不同的key -->
    <button @click="isEdit = !isEdit">切换1</button>
    <transition mode="out-in">        
        <button v-if="isEdit" key="edit">编辑</button>
        <button v-else key="save">保存</button>
    </transition>
    <br/>
    <!-- 相同标签名实现切换2 通过绑定不同的Key代替v-if-else -->
    <button @click="isedit2 = !isedit2">切换2</button>
    <transition>        
        <button :key="isedit2">{{isedit2 ? "编辑" : "保存"}}</button>
    </transition>
    <br/>

    <!-- 相同的标签名实现多个元素的过渡3  多个v-if -->
    <button @click="showNum">切换</button>
    <transition name="row">
        <div class="red" v-if="show == 'A' " key="A"></div>
        <div class="green" v-if="show == 'B' " key="B"></div>
        <div class="orange" v-if="show == 'C' " key="C"></div>
    </transition>
    <br/>

    <!-- 相同的标签名实现多个元素的过渡4  计算属性监控变化 -->
    <transition>
        <span :key="show2">{{showNum2}}</span>
    </transition>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            item:[],
            isEdit:true,
            isedit2:true,
            show:"A",
            show2:"A"
        },
        methods:{
            showNum(){
                if(this.show =="A"){
                    this.show ="B"
                }else if(this.show =="B"){
                    this.show="C"
                }else{
                    this.show ="A"
                }
            }
        },
        computed:{
            showNum2(){
                switch(this.show2){
                    case "A" : 
                        return "我是a";
                        break;
                    case "B" : 
                        return "我是b";
                        break;
                    case "C" : 
                        return "我是c";
                        break;    
                }
            }
        }
    })
</script>
</body>
</html>

View Code

（三）多个组件过渡

多个组件之间过渡，只需要使用动态组件即可，动态组件需要通过Vue中的<component>元素绑定is属性来实现多个组件的过渡。

案例解析：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全局配置render</title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        .fade-enter-active,.fade-leave-active{transition: color 2s;}
        .fade-enter-to,.fade-leave{color:red;}
        .fade-leave-to,.fade-enter{color:#000;}

    </style>    
</head>
<body>
    <div id="app">
        <a href="javascript:;" @click="exampleNumber ='example1'">登录</a>
        <a href="javascript:;" @click="exampleNumber ='example2'">注册</a>
        <transition name="fade" mode="out-in">
            <component :is="exampleNumber"></component>
        </transition>
    </div>

    <template id="example1">
        <span>我是登录页面</span>
    </template>
    <template id="example2">
        <span>我是注册页面</span>
    </template>

    <script type="text/javascript">
        Vue.component("example1",{
            template:"#example1"
        })
        Vue.component("example2",{
            template:"#example2"
        })
        var vm = new Vue({
            el:'#app',
            data:{
                exampleNumber:''
            },

        })
    </script>
</body>
</html>

View Code

（四）列表过渡

（1）列表过度需要使用v-for显示多个元素和transition-group组件给多个元素同时添加过渡效果来实现。

（2）列表过度的进入和离开。当插入和移除元素的时候，虽然有过渡效果，但是周围的元素会瞬间移到新的位置，而不是平滑的过渡，为了实现过度，可借助v-move特性，对于切换时机和过度曲线非常有用。

（3）列表的排序过渡。

v-move：为了实现列表的平滑过渡，可以借助v-move特性。对于设置过渡的切换时机和过渡曲线非常有用。可以通过name属性来定义前缀（name=list，则对应的类名就应该是list-move）也可以通过move-class属性手动设置自定义类名。

（4）列表的交错过渡。

（5）可复用的过渡

（3）钩子函数实现动画

el 表示要做动画的元素标签。

vue结合velocity的一个动画。

案例解析：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>列表过渡</title>
    <script type="text/javascript" src="./vue/vue.js"></script>
    <style type="text/css">
        .list-item{display: inline-block; margin-left:10px; background-color: red; border-radius: 50%; width:25px; height: 25px; text-align: center; line-height: 25px; color:#fff;}
        .list-enter-active, .list-leave-active{transition: all 1s;}
        .list-enter, .list-leave-to{opacity:0; transform: translateY(30px)}

        .list-move{transition:transform 1s;}
    </style>    
</head>
<body>
    <div id="app">
        <button @click="add">随机插入一个数字</button>
        <button @click="remove">随机移除一个数字</button>
        <transition-group name="list">
            <span  v-for="item in items" :key="item" class="list-item">{{item}}</span>
        </transition-group>
    </div>
    <script type="text/javascript">
        
        var vm = new Vue({
            el:'#app',
            data:{
                items:[1,2,3,4,5],
                nextNum :6
            },
            methods:{
                randomIndex(){
                    return Math.floor(Math.random() * this.items.length)
                },
                add(){
                    this.items.splice(this.randomIndex(), 0 , this.nextNum++)
                },
                remove(){
                    this.items.splice(this.randomIndex(),1)
                }
            }

        })
    </script>
</body>
</html>

View Code

posted @ 2020-11-21 17:32 壹碗阅读(366) 评论(0) 收藏举报

刷新页面返回顶部

壹碗

（5）Vue基础4

公告