<transition> can only be used on a single element. Use <transition-group> for lists

vue在使用transition时，报了一个错，排查发现是因为transition下不能有多个节点，所以做个调整将transition内的代码用div包裹一下就可以了。

报错前代码

  <transition name="custom-classes-transition" enter-active-class="animated fadeInDown"
              leave-active-class="animated fadeOutUp">
      <div class="navPop" v-if="showNav" @click="getHide"></div>
      <div v-if="showNav" class="downNav">
        <div class="downNavMain">
          <div v-for="(item,index) in list" :key="index">
            <div class="downNavMainTitle">
              <span class="icon" :class="'icon'+index"></span>
              <p>{{ item.title }}</p>
            </div>
            <div class="downNavMainList">
              <div @click="goUrl" class="downNavMainItem" v-for="(item2,index2) in item.children" :key="index2">
                <div class="itemTitle">
                  <span>{{ item2.title }}</span>
                  <img v-if="item2.isNew" src="../assets/new.png" alt="">
                  <img v-if="item2.isHot" src="../assets/hot.png" alt="">
                </div>
                <p>{{ item2.desc }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
  </transition>

调整后代码

  <transition name="custom-classes-transition" enter-active-class="animated fadeInDown"
              leave-active-class="animated fadeOutUp">
    <div>
      <div class="navPop" v-if="showNav" @click="getHide"></div>
      <div v-if="showNav" class="downNav">
        <div class="downNavMain">
          <div v-for="(item,index) in list" :key="index">
            <div class="downNavMainTitle">
              <span class="icon" :class="'icon'+index"></span>
              <p>{{ item.title }}</p>
            </div>
            <div class="downNavMainList">
              <div @click="goUrl" class="downNavMainItem" v-for="(item2,index2) in item.children" :key="index2">
                <div class="itemTitle">
                  <span>{{ item2.title }}</span>
                  <img v-if="item2.isNew" src="../assets/new.png" alt="">
                  <img v-if="item2.isHot" src="../assets/hot.png" alt="">
                </div>
                <p>{{ item2.desc }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>