Vue->实现切换页面转场动画

前言

    在某些项目中，产品经理或者UI设计师会要求加入一些页面特效，其中就包括转帐动画，这是一个专业名词，翻译过来其实就是页面之间左右切换时候的动画效果。如何实现这个效果，请听我一一道来

第一步

使用vue提供的transition动画标签

<transition :name="slide">
    <router-view class="Routers"></router-view>
</transition>
复制代码

第二步

初始化动画类名，做为中转

data() {
    return {
        slide: '', //动态改变更画方向
    }
}
复制代码

第三步

舰艇路由变化，动态控台动画方向 ``` watch: { $route(to, from) { if (to.meta.index > from.meta.index) { this.slide = "van-slide-left"; } else { this.slide = "van-slide-right"; } } } ``` ## ## **第四步**
在路由文件的路由对象中设置meta对象属性 ``` { path: '/recommend', name: 'recommend', meta: {index: 1}, component: recommend }, ``` ## **第五步**
编写CSS动画

.Router {
  position: absolute;
  left: 0;
  right: 0;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
复制代码

说明

• transiton动画标签只能包裹一个元素
• 若是整个项目仅有一个动画，能够去除掉冒号‘:’,写一个固定得动画类class
• 部分框架都包含了动画，若是使用框架动画类可直接省略style部分，.Routers除外

写在最后

但愿个人分享对你有所帮助，更多资讯请持续关注，我会分享愈来愈多的实战经验哦！ 或加入大前端知识体系社区一块儿探索技术:608229520

复制代码