Vue2.0 transition animation

Vue过渡:transition  单元素/组件的过渡
   Vue提供了transition的封装组件，可以在任何元素和组件添加 “进入/离开”过滤。
   (1) 条件渲染 (v-if)
   (2) 条件展示 (v-show)
   (3) 动态组件 
   (4) 组件根节点




过渡的类型:
   在进入/离开的过渡中，会有6个class切换
   v表示transition标签中的name值
   (1) v-enter: 定义了进入过渡的开始状态。即动画最开始的状态;
   (2) v-enter-active: 用于设置过渡过程的时间，延迟和曲线函数； 设置transition,animation
   (3) v-enter-to: 定义了过渡的结束状态。在过渡/动画完成之后移除。
   (4) v-leave: 定义离开过渡的开始状态。在离开过渡效果被处罚时立刻生效，下一帧被移除。
   (5) v-leave-active：设置离开过渡过程的时间，延迟和曲线函数； 设置transition,animation
   (6) v-leave-to： 定义离开过渡的结束状态。在过渡/动画完成之后移除。
   
   其中，由于元素/组件在界面展示之后，有指定的css样式。也就是进入动画的最终效果被确定；离开动画的开始效果被确定；所以说v-enter-to,v-enter可有可无。


  案例: 
  <div id=“demo”>
<button v-on:click=“show = !show“>toggle</button>
<transition name=“fade”>
<p v-if=“show”>hello</p>
</transition>
  </div>
 


  new Vue({


el : “#demo”,
data : {
   show: true
}
  });


 
  .fade-enter-active, .fade-leave-active {
    
     transition: opactiy .5s;
  }


  .fade-enter, .fade-leave-to {
     
    Opacity: 0;
  }












CSS动画
    Css动画用法同css过渡， 区别是在动画中v-enter类名在节点插入DOM后不会立即删除，而是在animationed事件触发时删除。


    案例:


    <div id=“example-2”>
<button @click=“show = !show“> Toggle show</button>
<transition name=“bounce”>
<p v-if=“show”>13errffgrreee</p>
</transition>
    </div>
  
    new Vue({


el: “#example-2”,
data : {
    show: true
}
    });


    .bounce-enter-active {
animation: bounce-in .5s;
    }
    .bounce-leave-active {
animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {


0% {
transform: scale(0);
}

50% {
transform: scale(10);
}
100% {
transform: scale(1);
}
    }










自定义过渡类名:
    我们可以通过以下特性来自定义过渡类名，用来方便衔接第三方动画库
    (1) enter-class
    (2) enter-active-class
    (3) enter-to-class
    (4) leave-class
    (5) leave-active-class
    (6) leave-to-class

    案例:
    <div id=“example-3”>
<button @click=“show = !show“>Toggle</button>
<transition name=“custom-classes-transition”
enter-active-class=“animated tada”
leave-active-class=“”animated bounceOutRight”>


<p v-if=“show”>hello</p>
</transition>
    </div>














多个元素的过渡:
   如果一个transition中包含有多个相同标签名时， 当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让vue区分它们，否则vue为了效率只会替换相同标签内部的内容。 
   <transition>
<button v-if=“isEditing” key=“save”>Save</button>
<button v-if=“isEditing”  :key=“isSave”></button>
<button v-else  key=“edit”>Edit</button>
   </transition>










列表的过渡: <transition-group>
    （1）<transition-group>会以一个真实元素呈现，默认为<span>。可以通过tag特性更换为其他元素。
    （2）过渡模式不可用，因为我们不再相互切换特有的元素。
    （3）内部元素总需要提供唯一的key属性值。


     列表的进入/离开过渡
     
     <div id="list-demo" class="demo">
         <button v-on:click="add">Add</button>
         <button v-on:click="remove">Remove</button>
         <transition-group name="list" tag="p">
         <span v-for="item in items" v-bind:key="item" class="list-item">
             {{ item }}
         </span>
         </transition-group>
    </div>


     new Vue({
  el: '#list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
         return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
         this.items.splice(this.randomIndex(), 1)
        },
      }
    })




    .list-item {
  display: inline-block;
  margin-right: 10px;
    }
    .list-enter-active, .list-leave-active {
        transition: all 1s;
     }
    .list-enter, .list-leave-to
     /* .list-leave-active for below version 2.1.8 */ {
         opacity: 0;
         transform: translateY(30px);
     }