vue切换路由页面左右滑动过渡动画效果，傻瓜式实现 |
您所在的位置：网站首页 › h5翻页过渡效果是什么 › vue切换路由页面左右滑动过渡动画效果，傻瓜式实现 |
|
此博文默认你已掌握入门的路由过渡知识，若有无法理解之处请自行补充相关知识或浏览我的下一篇博文… Vue已广泛运用于移动开发，页面间切换的路由过渡效果有很多方法实现，这里讲的是较简单粗暴的方法，便于理解实现原理。 1. 为需要路由过渡的部分添加，声明过渡。 data () { return { transitionName: 'transitionLeft', } },绑定name属性用于后面判断选择不同的左滑或右滑过渡。 2. 书写过渡css样式。 transitionBody类：规定全部样式以0.4秒的时间和ease-out的速度进行过渡动画； transitionLeft：左滑的过渡周期类名； transitionRight：右滑的过渡周期类名； 注意：最好是为左滑和右滑的enter-active类添加绝对定位，并上下左右给个0，这一步是为了滑动时防止页面因为来不及加载数据而导致部分元素位置大幅度抖动，影响体验感和美观。 .transitionBody{ transition: all 0.4s ease-out; } .transitionLeft-enter, .transitionRight-leave-active { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } .transitionLeft-leave-active, .transitionRight-enter { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } .transitionLeft-enter-active, .transitionRight-enter-active { //防止过渡时元素抖动 position: absolute; top: 0; right: 0; left: 0; bottom: 0; }3. watch监听当前路由的层级，判断决定采用左滑或右滑的过渡类。 这一步是实现整个功能的核心。将需要过渡动画的页面路由路径保存为一个数组，通过监听路由的from路径和to路径，判断路由在数组中的index级别大小，实时更改transiton的name属性，从而决定是左滑或右滑。 watch: { '$route'(to, from) { const arr = ['/shop-order', '/driver-info', '/shop-info', '/shopOrder-detail', '/change-password'] this.transitionName = arr.indexOf(to.path) > arr.indexOf(from.path) ? 'transitionLeft' : 'transitionRight' } }到此为止，已经能够实现路由切换平滑顺畅地左右滑动过渡效果。通过这个简单粗暴的数组方法我们不难理解，实现这个效果的核心在于如何判断当前路由和目的路由的层级大小关系，从而决定当前过渡采用前进或后退。 大家若有其他方法或判断方式可评论交流，后面我也会慢慢更新实现该效果的其他方式~ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |