1.vue文件

说明：加name属性

        <transition name="sort"><div class="sort" v-show="show"><div class="all-sort-list2" @click="goSearch"><div class="item bo" v-for="(item1, index) in categoryList" :key="item1.categoryId"><!-- 鼠标以上就有相对应的cur类名 --><h3 @mouseenter="changeIndex(index)" :class="{ cur: currentIndex === index }"><a :data-categoryName="item1.categoryName" :data-category1Id="item1.categoryName">{{ item1.categoryName}}</a></h3><!-- 二级和三级分类 --><div class="item-list clearfix" :style="{display: currentIndex === index ? 'block' : 'none',}"><div class="subitem" v-for="item2 in item1.categoryChild" :key="item2.categoryId"><dl class="fore"><dt><a :data-categoryName="item2.categoryName" :data-category2Id="item2.categoryName">{{item2.categoryName }}</a></dt><dd><em v-for="item3 in item2.categoryChild" :key="item3.categoryId"><a :data-categoryName="item3.categoryName" :data-category3Id="item3.categoryName">{{item3.categoryName }}</a></em></dd></dl></div></div></div></div></div>

2.css文件

  // 过渡动画开始的状态.sort-enter {height: 0;}// 动画结束的动画.sort-enter-to {height: 461px;}.sort-enter-active {transition: all 0.5s linear;}

3. 应用