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