vue 進入離開動畫效果

1. 要添加過渡效果的元素用transition包裹起來，聲明唯一的name=fade。

<transition name="fade">
    <ul class="pd-18-0 carClassSelectBox" v-if="forumTypeShowState">
       <li class="carClassSelectItem" :class="{'c-08568b': item.id == id, 'c-666666': item.id != id}" v-for="item in forumTypeList" :key="item.id" @click="checkForumType(item)">{{item.title}}</li>
    </ul>
 </transition>

2. 在css里面編寫css動畫。

/* 進入頁面動畫 */
.fade-enter-active, .fade-leave-active {
    transition: .3s;
    transform: translateY(0%);
    z-index: 22;

}
/* 離開頁面動畫 */
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    transition: .3s;
    transform: translateY(-100%);
    z-index: 22;
}