.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