1. 父子路由间的卡片式动画

<transition name="direction"><router-view class="direction-view"></router-view>
</transition>

.direction-enter,
.direction-leave-to {transform: translate3d(100%, 0, 0);
}.direction-view {position: absolute;top: 0;left: 0;bottom: 0;width: 100vw;z-index: 100;overflow: hidden;transition: transform 0.3s;
}

2.兄弟组件之间的左右轮回动画

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


.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {width: 100vw;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);
}

/* 路由文件中 */{path: '/home',component: () => import('@/views/home/index'),children: [{path: 'home',component: () => import('@/views/home/home/index'),meta: {index: 0, // 重点}},{path: 'mine',component: () => import('@/views/home/mine/index'),meta: {index: 1, // 重点}}]
}/* 当前组件中 */
data() {return {transitionName: 'slide-left'}
},watch: {'$route'(to, from) {const {index: toIndex} = to.metaconst {index: fromIndex} = from.metathis.transitionName = toIndex < fromIndex ? 'slide-right' : 'slide-left'}}

Vue 超级丝滑的路由动画相关推荐

vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort
今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort. vue-slicksort 一款功能强大的可拖拽的vue.js组件.拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序.还可以 ...
ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable
今天给小伙伴们分享一款纵享丝滑般体验的Vue拖拽树形表格DragTreeTable. vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件.支持拖拽排序.固定表头.拖拽 ...
这样设置过渡动画，让你的Android手机变得更丝滑
前言通过合理的设置安卓中过渡动画的缩放速度,可以让安卓手机中窗口的切换更自然.更流畅,操作上感觉更加的丝滑.安卓手机上一般有窗口动画缩放(window_animation_scale).过渡动画缩放 ...
深入浅出讲解丝滑般动画特效实现原理
作者丨哈哈将个推安卓高级开发工程师来源丨个推技术学院 (getuitech) 前言 APP开发市场已经告别"野蛮生长"时代,人们不再满足于APP外形创新,而将目光转向全方面的用 ...
Unity技能工厂——怎样实现丝滑的角色连击动画
RPG类型的动作游戏因为其敏捷的工作动作,技能连招之间丝滑的衔接,视觉冲击感爆棚的技能释放特效,所谓"拳拳刀肉,刀刀进身"的攻击效果,吸引了一大批忠实角色类扮演游戏的忠实粉丝. 那 ...
android 揭示动画,Android进阶设计 | 使用揭露动画（Reveal Effect）做一个丝滑的Activity转场动画...
提笔之际(附总体思路) 最近跟几个小伙伴在实践一个项目,考虑到界面效果,我们决定使用揭露动画作为Activity的转场动画. 这里主要是我负责这部分的实现. 话说之前是没接触过的,关于具体的实现跟大体 ...
Android 最丝滑的动画--第二篇MotionLayout概述(后面陆续更新)(带效果图)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档一. MotionLayout概述 MotionLayout 是谷歌推出的一种布局类型,可帮助管理应用中的运动和微件动画.Motion ...
卡通动画项目 —— 写代码 —— 睡觉 —— 丝滑如德芙
目录本次实现效果目录结构 index static/css/style.css static/js/script.js 结语: 前期回顾 [ css动画 ]-- 把你喜欢css动画嵌入到浏览器中_ ...
2.Unity2D 横版帧动画sprite animation+动画状态机animator+丝滑连击动作
ax总目录 1.帧动画sprite animation的创建 2.动画状态机animator 教学链接https://blog.csdn.net/linxinfa/article/details/94 ...

Vue 超级丝滑的路由动画

1. 父子路由间的卡片式动画

2.兄弟组件之间的左右轮回动画

Vue 超级丝滑的路由动画相关推荐

最新文章

热门文章