Vue怎么实现app前进后退动画切换效果

今天小编给大家分享一下Vue怎么实现app前进后退动画切换效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

一丶首先配置路由并且修改路由配置

路由配置就不讲了重点，给VueRoute添加一个goBack方法，用于记录路由的前进后退状态

this.isBack = true VueRouter.prototype.goBack = function () { 　　this.isBack = true　　window.history.go(-1)}

二丶监听路由变化（在路由变化时判断此时的路由状态是前进还是后退）

<template>　　<div>　　　　动态绑定路由动画，根据路由状态的不同绑定不同的路由动画分别为 ：‘slide-left' 和 'slide-right'　　　　<transition :name="transitionName"> 　　　　　　<router-view class="Router"></router-view>　　　　</transition>　　</div></template><script>export default {　　data() {　　　　return {　　　　　　transitionName: 'slide-right' // 默认动态路由变化为slide-right　　　　}　　},　　watch: {　　　'$route' (to, from) {　　　　let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退　　　　　　if(isBack) {　　　　　　　　this.transitionName = 'slide-right'　　　　　　} else {　　　　　　 this.transitionName = 'slide-left'　　　　　}　　this.$router.isBack = false　　}　 }　}</script>

三丶给前进后退动画添加不同的动画效果，具体代码如下：

<style>.Router { position: absolute; width: 100%; transition: all .8s ease; top: 40px;}.slide-left-enter, .slide-right-leave-active { opacity: 0; -webkit-transform: translate(100%, 0); transform: translate(100%, 0);}.slide-left-leave-active,.slide-right-enter { opacity: 0; -webkit-transform: translate(-100%, 0); transform: translate(-100% 0);}</style>

四丶路由前进的时候按正常方法走就行了；

五丶后退的时候调用goBack方法就OK；

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

以上就是“Vue怎么实现app前进后退动画切换效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。