vue的过渡效果 --diff算法--虚拟dom节点

引入：在html5和css3中进出场实现动画需要太多太多的函数方法来实现效果,但在vue中有着已经写好的方法我们只需要通过调用即可实现。

一，过渡

css代码 展示

<style>
        //进场动画
        .hxl-enter-active{
            animation: hxl 1.5s;
        }
        //出场动画
        .hxl-leave-active{
            animation: hxl 1.5s reverse;
        }
        //keyframes 关键帧
        @keyframes hxl {
            0%{
                opacity: 0;
                transform: translateX(100px);
            }
            100%{
                opacity: 1;
                transform: translateX(0px);
            }
        }
    </style>

html代码

 <div id="box">
        <button @click="isShow=!isShow">chenge</button>
            <transition enter-active-class="hxl-enter-active"
            leave-active-class="hxl-leave-active">
            <div v-show="isShow">1111111111111</div>
            </transition>

通过button按钮触发点击事件让内容显示和隐藏，组件会通过dom节点的改变实现出场和进场的动画渲染 ，transition组件是vue提供的动画组件， enter-active-class是进场时动画, leave-active-class是出场动画

enter-active-class和leave-active-class的简写方式但在class命名时必须符合xxx-enter-active和xxx-leave-active的形式

<transition name="hxl">

实现效果

二，过渡替换节点 

在transition中只能有

一个dom存在，那如何实现两个数据的替换呢，那么我们就要结合v-if 

                  <transition name="hxl">
                    <div v-if="isShow" >1111111111111</div>
                    <div v-else >2222222222222</div>
                  </transition>

  

但我们运行后发现与我们预想的不一致,那是因为在vue中有虚拟dom帮我们检查新dom和旧dom

通过diff算法发现新旧的区别然后将修改的数据放在dom节点中，这个过程中并没有发生dom节点的改变

 

 

绑定key值来实现替换动画

                   <transition name="hxl">
                        <div v-if="isShow" key="1">1111111111111</div>
                        <div v-else key="2">2222222222222</div>
                   </transition> 

使用不同标签让dom节点改变 ，实现动画效果

            <transition name="hxl">
                <div v-if="isShow">1111111111111</div>
                <p v-else>2222222222222</p>
            </transition

 transition的其他属性

appear初始动画，mode="out-in或out-in"定义动画先消失在出现或先出现在消失

 三，多个组件过渡

    ul{
        position: fixed;
        top: 600px;
        
        height: 50px;
        width: 200px;
    }
    ul li{
        background-color: blanchedalmond;
        border: 3px solid rebeccapurple;
        list-style-type: none;
    }
    .hxl-enter-active{
            animation: hxl 1.5s;
        }
        .hxl-leave-active{
            animation: hxl 1.5s reverse;
        }
        @keyframes hxl {
            0%{
                opacity: 0;
                transform: translateX(100px);
            }
            100%{
                opacity: 1;
                transform: translateX(0px);
            }
        }

<div id="box">
        <keep-alive>
            <transition name="hxl" mode="in-out">
        <eomponent :is="which"></eomponent>
    </transition>
    </keep-alive>
        <footer>
            <ul>
                <li @click=" which= 'home'">首頁</li>
                <li @click=" which= 'list'">列表</li>                
                <li @click=" which= 'shopping'">购物车</li>

            </ul>
        </footer>
    </div>

 Vue.component("home",{
            template:`
            <div>
                home
                <input type="search"/>
                </div>
            `
        })
        Vue.component("list",{
            template:`
            <div>
                list
                </div>
            `
        })
        Vue.component("shopping",{
            template:`
            <div>
                shopping
                </div>
            `
        })
new Vue({
    el:"#box",
    data:{
        which:"home"
    }
})

效果

四，使用transition-group组件实现多个列表过渡 

  <div id="box">
    <input type="text" v-model="mytext">
    <button @click="handadd">add</button>
    <ul>
        <transition-group name="hxl" >
            <!-- key值不能加index -->
        <li v-for="(item,index) in datalist" :key="item">{{item}}---{{index}} <button @click="handdel(index)">del</button></li>
    </transition-group>
    </ul>
</div>

  new Vue({
        el:"#box",
        data:{
            datalist:["aaa","bbb","ccc"],
            mytext:''
        },
        methods:{
            handadd(){
               this.datalist.push(this.mytext)
               this.mytext=''
               
            },
            handdel(index){
                this.datalist.splice(index,1)
            }
        }

    })

列表的key值不能使用index值