Vue过渡动画

vue在插入、更新或者移除DOM时，提供多种不同方式地应用过渡效果。

• 在css过渡和动画中自动应用class
• 可以配合使用第三方动画库，如Animate.css
• 在过度钩子函数中使用JavaScript直接操作DOM
• 可以配合使用第三方JavaScript动画库，如Velocity.js

Vue提供了transition的封装组件，可以给任何元素和组件添加进入/离开过渡

• 条件渲染（使用 v-if）
• 条件展示（使用v-show）
• 动态组件
• 组件根节点

就是用transtion组件包裹，在执行创建销毁，消失出现，动态切换的场景时，会被添加上过渡效果。

实现一个简单的过渡动画

思路：
页面切换的过程，就是旧的页面销毁（隐藏）到新页面创建（显示）的过程，给这个过程加上过渡效果，增加上一个左右平移的动画效果。

实现步骤：

1、给路由容器router-view包裹上transtiion组件，使其在切换的时候会加载过渡效果

//name指定过渡所执行的动画，动态绑定是为了切换不同的转场动画
    <transition :name="animation">
     //router-view加上绝对定位效果，默认居于左上角
      <router-view class="router"></router-view>
    </transition>
    
<style>
.router {
  position: absolute;
  left: 0;
  top: 0;
}
</style>

2、动画过渡的效果

//左滑动画和右滑动画
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.8s ease;
  position: absolute;
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-left-leave-to {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

3、给不同的页面设置层级，作为滑动的判断

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    children: [
      {
        path: "/",
        //index代表当前页面层级
        meta: { index: 1 },
        component: () => import("../views/index/index.vue"),
      },
      {
        path: "/my",
        meta: { index: 1 },
        component: () => import("../views/my/my.vue"),
      },
    ],
  },
  //跳转详情
  {
    path: "/classDetail",
    meta: { title: "课程详情", index: 2 },
    component: () => import("../views/class/classDetail.vue"),
  },
  //老师详情
  {
    path: "/teacherDetail",
    meta: { title: "讲师详情", index: 2 },
    component: () => import("../views/index/child/Details.vue"),
  }
  ]

4、监听路由信息，根据要跳转的页面层级和当前的页面层级，来决定执行左右滑动的效果，一般来说，进入页面为优右滑，离开为左滑。

 watch: {
    $route (to, from) {
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.animate = 'slide-left';
      } else {
        this.animate = 'slide-right';
      }
    }
  },
    data () {
    return {
      animate: ''
    }
  },