vue转场动画

transtion内置组件

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

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

    <transition :name="animation">
    //里面可以放置组件
    </transition>

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

过渡效果的不同时期

简单的转场动画

实现思路：
页面切换的过程，其实就是老页面销毁 (隐藏) 到新页面创建 (显示) 的过程，我们给这个过程加上过渡效果，增加一个左右平移的动画，是页面更加生动形象！

大概效果：

当前页面跳转到其他页面，页面会整体水平向左向右偏移；

实现步骤

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

//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: ''
    }
  },

小细节：
取消动画效果产生的系统滚动条

html{
     
  overflow: hidden;
}