vue组件切换过渡效果

    <transition name="fade-transform" mode="out-in">
    <!-- 测试环境 -->
      <keep-alive :include="cachedViews" v-if="process === 'development'">
        <router-view :key="key"/>
      </keep-alive>
    <!-- 生产环境 -->
      <keep-alive :include="cachedViews" v-else>
        <router-view :key="key"/>
      </keep-alive>
    </transition>

transition组件内必须有一个根标签，如果需要包裹一个组请使用transition-group

组件的name属性接收一个类名作为参数。此类就是过渡的动画类

//globl transition css

/*fade*/
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/*fade-transform*/
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/*fade*/
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all .5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all .5s;
}

.breadcrumb-leave-active {
  position: absolute;
}

transition内的标签如果没有出现过渡效果，那就给元素添加上key。 如上述代码一样。需要切换的是<router-view> 所以给他绑上一个唯一的key。这样就会出现过渡效果了。