list添加删除动画(transition-group)
<template> <div id="app"> <transition-group tag="ul" name="list"> <li v-for="(item,index) in list" :key="index">{{item}}<button @click="handleDelete(index)">删除</button></li> </transition-group> <el-button @click="handleAdd">添加</el-button> </div> </template> <script> export default { data() { return { list: ['项目1', '项目2', '项目3'] } }, methods: { handleAdd() { this.list.push('项目n' + Math.random()) }, handleDelete(index) { this.list.splice(index, 1) } } } </script> <style lang="less" scoped> #app { > ul { li { height: 40px; border: 1px solid #ccc; } } .list-enter-active, .list-leave-active { transition: height 0.1s linear; } // 进场 离场 .list-enter, .list-leave-to { height: 0; } } </style>
新增和删除时对height做个动画