Vue2.0 的动画过渡

7种过渡

动画过渡效果

第一种 css 过渡效果

要想使用过渡的元素,用 transtion 标签包裹起来,,制定一个name属性,name=h,

<style>
   .box{
        width:100px;
        height:100px;
        background : #000;
    }
            .height-enter-active{
从进入到完全进入及从离开到完全离开
                transition : all 5s;
            }
            .height-leave-active{
                transition : all 5s;
            }
            .height-enter,.height-leave-active{
进入之前及离开之后
                height:0;
            }
            li{
                display:inline-block;
                list-style:none;
                margin:10px;
            }
            .li-enter-active,.li-leave-active{
                transition : all 2s;
            }
            .li-enter,.li-leave-active{
                opacity : 0;
            }
        </style>

transtion neme 属性的 name="height" 对应的是style的,.height-enter-active

<div id="box">
<button @click="show1=!show1">点击</button>
<transition name="height">
    <div class="box" v-show="show1"></div>
</transition>
           <hr>
             <button @click="show2=!show2">点击</button>
            <transition enter-active-class="animated tada" >
                 <div class="box" v-show="show2"></div>
           </transition>
           <hr>
           <!-- 列表过度-->
           <button @click="add">click it</button>
           <transition-group tag="ul" name="li">
               <li v-for="(x,index) in arr" 
               :key="index">{{ x }}---{{index}}</li>
            </transition-group>
        </div>
    </body>
     <script src="vue2.0.js"></script>
     <script>
         var vm = new Vue({
             el : "#box",
             data : {
                 show1 : true,
                show2 : true,
                arr : ["a","b"],
             },
             components : {               
            },
            methods : {
                add : function(){
                    var pos = parseInt(Math.random()*this.arr.length);
                    var val = parseInt(Math.random()*100);
                    // this.arr.push(parseInt(Math.random()*100))
                    this.arr.splice(pos,0,val);
                }
            },
            computed : {},
        })
     </script>