<style>
/* 给动画添加一组过度效果 */
.v-enter,.v-leave-to {
opacity: 0.8;
/* 从右向左进入 */
transform: translateX(80px);
/* 从下向上进入 */
transform: translateY(80px);
}
.v-enter-active,.v-leave-active {
transition: all 0.6s ease;
}
</style>
</head>
<body>
<div id="app">
<div>
<label>
Id:<input type="text" v-model="id">
</label>
<label>
Name:<input type="text" v-model="name">
</label>
<label>
添加:<input type="button" @click="add" value="添加">
</label>
</div>
<!-- 在实现列表过度的时候 如果需要过度的元素是通过v-for循环渲染出来的 不能
使用transition包裹 需要使用transitionGroup -->
<!-- 如果要为v-for循环创建的元素设置动画 必须为每一个元素设置 :key属性 -->
<ul>
<transition-group>
<li v-for="item in list" :key="item.id">
{{item.id}}---我是动画--->{{item.name}}
</li>
</transition-group>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",data: {
id: "",name: "",list: [{
id: 1,name: "赵高1"
},{
id: 2,name: "赵高2"
},{
id: 3,name: "赵高3"
},{
id: 4,name: "赵高4 "
},]
},methods: {
add() {
this.list.push({
id: this.id,name: this.name
})
this.name = this.id = "";
},},})
</script>
