vue中transition动画的使用

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