vue 路由切换动画（滑入，滑出效果）

最近做的一个小项目，需要做路由切换，页面滑入滑出的效果，总结下实现的思路和方法。

router-view

用 transition 标签包裹 router-view 组件，动态添加动画名，data 里定义transitionName变量。

<transition :name="transitionName"><router-view></router-view>
</transition>

css样式：

.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);}

watch监听路由的变化

watch: {//使用watch 监听$router的变化$route(to, from) {//如果to索引大于from索引,判断为前进状态,反之则为后退状态console.log(to, "to");console.log(from, "from");if (to.meta.index > from.meta.index) {//设置动画名称this.transitionName = "slide-left";} else {this.transitionName = "slide-right";}},},

页面进出效果meta对象里index索引的定义

const Help = () => import("./Help.vue");
export default {path: "/help",name: "help",component: Help,meta: {index: 8,},
};
const StaffCard = () => import("./StaffCard.vue");
export default {path: "/staff-card",name: "staff-card",component: StaffCard,meta: {index: 9,},
};

以上，就可以实现页面路由切换的动画效果了。思路就是css写出动画效果，监听路由的变化，如果to索引大于from索引,使用前进的动画,反之使用后退的动画。

1人点赞

学习笔记

vue 路由切换动画（滑入，滑出效果）相关推荐

Android Fragment切换动画(滑入滑出)
之前写过一篇Activity切换动画的文章Activity切换动画(滑入滑出) 本文还采用滑入滑出的方式,贴一下Fragment之间切换动画的实现,Fragment比Activity需要多考虑一点 a ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
JQuery动画之滑入滑出动画
1. 滑入动画(类似于商店的卷帘门) $(selector).slideDown(speed, 回调函数); 解释: 此语句实现的功能为, 在XX时间内, 下拉动画, 显现元素. 当 slideDow ...
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节查看作业目录需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果用户将光标移动到"最新动态页"或"帮助查询" ...
【动画】左右滑入滑出效果、transition使用
左右滑入滑出文章目录左右滑入滑出用transition 不用transition 用transition <transition name="le ...
CSS3实现div滑入滑出效果（从下往上）
1,首先需要用的是 CSS3的 target 选择器,配合a标签指定id选择器切换目标元素,用于选取当前活动的目标元素. 2,CSS3 的 transition 动画,这里不做详细介绍看一下效果图: ...
实现元素的滑入滑出效果
文章目录 CSS动画 Demo.vue,使用transition Demo.vue,使用transition,且自定义name Demo.vue,使用transition,且自定义name,且使用属性 ...
jquery效果显示隐藏滑入滑出
jquery jquery效果 jquery 给我们封装了很多动画效果,最为常见的如下: 显示隐藏:show() / hide() / toggle() ; 滑入滑出:slideDown() / sl ...
jq样式操作和效果(显示隐藏,滑入滑出,淡入淡出)
jq样式操作和效果 1.样式 1.jq设置样式 $("div").css('属性','值'); 2.jq排他思想 //多选一.排他思想,当前元素设置样式,其与兄弟清除样式 $(th ...

vue 路由切换动画（滑入，滑出效果）

vue 路由切换动画（滑入，滑出效果）相关推荐

最新文章

热门文章