[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; } ```