[TOC] ## TransitionGroup 与 Transition ``` <TransitionGroup tag="ul" name="fade" class="container"> <div v-for="item in items" class="item" :key="item"> {{ item }} <button @click="remove(item)">x</button> </div> </TransitionGroup> //css /* 1. 声明过渡效果 */ .fade-move, .fade-enter-active, .fade-leave-active { transition: all 0.5s ; } /* 2. 声明进入和离开的状态 */ .fade-enter-from, .fade-leave-to { opacity: 0; transform: scaleY(0.01) translate(30px, 0); } /* 3. 确保离开的项目被移除出了布局流 以便正确地计算移动时的动画效果。 */ .fade-leave-active { position: absolute; } ```