Vue引用过度类名实现动画及小案例

.v-enter:进入之前的状态
.v-leave-to:离场之后的状态
.v-enter-active:入场动画的过程
.v-leave-active:离场动画的过程

  <style>
        /*进入之前的状态  ：v-enter  离场之后的状态：v-leave-to */
      .v-enter,
       .v-leave-to{
           opacity: 0;
           transform: translateY(80px);
       }
        /*入场动画的过程*/
        .v-enter-active,
            /*离场动画的过程*/
        .v-leave-active{
           transition: all 1s;
        }
 /*配合使用能使列表后续的元素渐渐的飘上来*/
        .v-move{
            transition: all 0.8s ease;
        }
        .v-leave-active{
            position: absolute;
        }

    </style>

html

<div id="app">
    <div>
        id: <input type="text" v-model="id">
        name: <input type="text" v-model="name">
        <button @click="add">添加</button>
    </div>
    <!--<ul>-->
        <!--使用v-f