• 最近在用 vuejs 写之前的一个博客，用vuejs来开发新项目，真心优雅的一个框架。

• 开发中遇到了一个router-view 切换增加过渡的问题，这里值的说一下

      <template>
          <top></top>
          <menu></menu>
          <router-view class="view" transition="test" transition-mode="out-in" keep-alive></router-view>
      </template>
  
      <style>
      .view {
        transition: all .5s ease;
      }
      .test-enter, .test-leave {
        opacity: 0;
        transform: translate3d(20px, 0, 0);
      }
      [v-cloak] {
        display: none;
      }
      </style>

• 上面剪短的代码，是不是让你觉得很简单呢，不过，我今天说了是我遇到的几个问题

需要注意的是vue组件的根节点必须只能有一个，否则动画不会执行。

• 下面来说一下，vue组件的根节点必须只有一个

实例1

    <template>
    <div class="x-cat-content">
          <h2>文章分类</h2>
          <ul class="cat-list" v-for="cat in catList">
            <li><a href="list.html"> <i class="icon-star"></i>{{cat.title}}</a></li>
          </ul>
        </div>
      <Foot></Foot>
    </template>

出错，原因是因有两个根节点，一个div ，一个自动义标签Foot

> 实例2 ，一开始我以为是 自定义标签的问题，我把Foot 删除调，过渡 动画好了，

把自动义标签写成了真是的div，运行一样报错，看到这里好像明白了点什么

实例3，大功告成

   <template>
  <div class="content">
    <div class="x-cat-content">
      <h2>文章分类</h2>
      <ul class="cat-list" v-for="cat in catList">
        <li><a href="list.html"> <i class="icon-star"></i>{{cat.title}}</a></li>
      </ul>
    </div>
  <Foot></Foot>
  </div>
</template>

几段代码，大家看明白了什么吗？vue组件的根节点必须只能有一个， 一个指一个层级，实例3， 就Foot 放到了 最顶层的div 中，过渡动画完成。