列表动画
首先还是使用之前章节中的动画样式效果
<style>
.v-enter-from{
opacity: 0;
}
.v-enter-active{
transition: all .5s ease-in;
}
.v-enter-to{
opacity: 1;
}
.list-item{
display: inline-block;
margin-right: 10px;
}
</style>
为了实现列表效果,我们就要在data
函数里面去定义一个列表可循环的数据值,然后将它嵌套在transition
标签中进行循环。
<script>
const app = Vue.createApp({
data(){
return {
list: [1, 2, 3]
}
},
methods: {
handleClick(){
this.list.unshift(this.list.length + 1)
},
},
template: `
<div>
<transition>
<div v-for="item in list" :key="item">{
{item}}</div>
</transition>
<button @click="handleClick">切换</button>
</div>
`
});
const vm