精华内容
下载资源
问答
  • 文件分为 3个 放置文件 说明 文件 和图片 PageTransition.vue 放在文件包里 在路由里面 引入 然后其它路径 都为 改路径的子路径 ,不会引入可以看文档,或图片
  • vue页面切换动画

    2020-04-15 15:45:13
    VUE学习笔记vue基本语法整理条件渲染列表渲染vue 路由vue路由切换动画 vue基本语法整理 条件渲染 列表渲染 vue 路由 vue路由切换动画 vue路由切换动画,是基于vue的过渡动画效果做的。 这里需要解决2个问题: 1.监听...

    vue基本语法整理

    条件渲染

    列表渲染

    vue 路由

    vue路由切换动画

    vue路由切换动画,是基于vue的过渡动画效果做的。

    这里需要解决2个问题:
    1.监听路由的变化;
    2.判断路由的行为是下一个页面还是 返回到上一个页面。
    通过区分了路由行为后,我们就可以给不同的行为设计不同的动画,比如下一个页面是向左横屏滑动到下一个页面,返回的时候是向右横屏滑动到上一个页面。

    解决第一个问题,通过在跟组件监听路由。代码如下:

    watch: {
        $route(to, from) {
        	console.log(to,from);
        	//这里每次切换路由都会触发一次,在这里做动画逻辑
        }
      },
    

    解决第二个问题,如何知道是路由的什么行为。
    百度之后,找到了两种解决方案,一种是在路由里通过meta 传值,设定层级序号来做;
    这个不推荐使用,因为页面少了我们可以排序号,如果页面很多,而且还有公用的情况,这个序号就不好维护了。

    第二种是 在main.js中添加 popstate 事件。代码如下:

    window.addEventListener("popstate",function(){
      router.isBack = true;
    },false)
    

    通过给router设置一个isBack属性,然后通过这个属性来判断是返回还是 下一个页面;
    但是这个测试的时候有问题,因为 postate 事件会在 go方法的后面执行,这样在监听router的时候拿到的值不是最新的。所以也不推荐;

    下面是我自己的思路提供大家参考:
    首先在 项目跟组件 data中加个样式名字字段:transitionName:""
    然后把动画样式写好,并且给路由组件设置上动画

    /*
    这个是避免切换的时候,两个页面都是半屏显示的问题
    */
    .router{
    	width:100%
    }
    .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);
    }
    
    <transition :name="transitionName">  
          <router-view class="router"/>
    </transition>
    

    在watch中加入下面的代码

    watch: {
        $route(to, from) {
          //如果to索引大于from索引,判断为前进状态,反之则为后退状态
          let isBack = this.$router.isBack
            console.log(isBack);
            if(isBack){
              //设置动画名称
              this.transitionName = 'slide-right';
            }else{
              this.transitionName = 'slide-left';
            }
            this.$router.isBack = false;
        }
      },
    

    最后是在main.js里给vue原型上挂个方法,如下:

    Vue.prototype.my_go = (num)=>{
      router.isBack = true;
      router.go(num);
    }
    

    在页面中调用返回上个页面(go)的时候,用my_go方法替代;
    使用:

    this.bqm_go(-1);
    

    大家如果有更好的方法请留言,交流。

    展开全文
  • 参考文章:Vue切换页面时的过渡动画_zhangxu0215的专栏-CSDN博客 根据此作者写的文章修改了一些样式符合我的系统搞定了过度动画,但是会出现一些动画左右错乱的现象,原因是因为meta.index大小不一,所以应该自行...

    参考文章:Vue中切换页面时的过渡动画_zhangxu0215的专栏-CSDN博客

    根据此作者写的文章修改了一些样式符合我的系统搞定了过度动画,但是会出现一些动画左右错乱的现象,原因是因为meta.index大小不一,所以应该自行根据小窗口的List进行排序即可。

    watch: {
        //使用watch 监听$router的变化
        $route(to, from) {
          let toIndex = 0;
          let fromIndex = 0;
          this.$store.state.tagsView.visitedViews.forEach((item,index)=>{
            if(item.path == to.path){
              toIndex = index;
            }else if(item.path == from.path){
              fromIndex = index;
            }
          })
          //如果to的索引值为0,不添加任何动画;如果to索引大于from索引,判断为前进状态,反之则为后退状态,(原为to.meta.index)
          if (toIndex < fromIndex) {
            this.transitionName = "slide-right";
          } else {
            this.transitionName = "slide-left";
          }
        }
      },

    每个系统中的小窗口列表在store都不太一样,自己查找一下哈,本人的是this.$store.state.tagsView.visitedViews。

    然后是和缓存之间有冲突,如果使用v-if="$route.meta.keepAlive",会报错,所以我们改用include的方式。

    <transition :name="transitionName">
       <keep-alive include="keepAlive">
         <router-view></router-view>
       </keep-alive>
    </transition>

    每个需要缓存的页面加上name即可。只要有name就被缓存了

    export default {
      //写此name即为开启缓存
      name:'keepAlive',
      data () {
        return {
    
        }
      }
    }

    被缓存的页面还会出现不刷新的现象,我们需要的是查询参数被缓存,但是列表需要刷新所以要用beforeRouteEnter进行操作。

      methods: {
          getInfo () {
              //列表查询接口
          }
      },
      beforeRouteEnter (to, from, next) {
        next(vm =>{
          vm.getInfo();
        });
      },
      created(){
        //不需要开始加载了,改用路由进入加载
        //this.getInfo();
      }

    展开全文
  • vue切换页面动画

    2019-07-29 16:14:42
    <template> <div id="app"> <transition :name="transitionName" > <router-view class="router"/> </transition> </div> </template>...script&g...
    <template>
      <div id="app">
        <transition :name="transitionName" >
          <router-view class="router"/>
        </transition>
      </div>
    </template>
    
    <script>
    import '../static/js/flexible'
    export default {
        name: 'App',
        data(){
            return {
                transitionName:"slide-left",
            }
        }
    }
    </script>
    
    <style>
      .router{
        position: absolute;
        top:0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: all .7s ease;
        -webkit-transition: all .7s ease;
        -moz-transition: all .7s ease;
      }
      .slide-left-enter, .slide-right-leave-active {
        opacity: 0;
        -webkit-transform: translate(60px, 0);
        transform: translate(60px, 0);
      }
      .slide-left-leave-active, .slide-right-enter {
        opacity: 0;
        -webkit-transform: translate(-60px, 0);
        transform: translate(-60px, 0);
      }
    </style>

     

    展开全文
  • 今天小编就为大家分享一篇VUE页面切换动画代码(全网最好的切换效果),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue切换页面效果文件,很多页面切换效果欢迎来下载哈,喜欢的点赞哦
  • 本篇文章主要介绍了vue实现app页面切换效果实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了vue实现app页面切换动画效果实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue开发APP切换页面动画过度效果

    千次阅读 2019-02-17 23:18:52
    1.我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画. import VueRouter from 'vue-router' import Home from '../...

    实现问题

    1.如何判断切换路由时是前进还是后退

    2.每次切换时向左向右切换动画如何实现

    实现原理

    1.我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画.

    import VueRouter from 'vue-router'
    import Home from '../components/home/home'
    import User from '../components/user/user'
    
    var router = new VueRouter({
        routes:[{
            name:'test',
            path:'/',
            meta:{index:0},//meta对象的index用来定义当前路由的层级,由小到大,由低到高
            component:{
                template:'<div>test</div>'
            }
        },{
            name:'home',
            path:'/home',
            meta:{index:1},
            component:Home
        },{
            name:'user',
            path:'/user/:id',
            meta:{index:2},
            component:User
        }]
    });
    

    2.监控路由跳转,判断切换页面之间的层级关系,并以此来判断路由前进或者后退.

    <template>
      <div id="app">
        <transition :name="transitionName">   
          <router-view></router-view>
        </transition>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      data(){
          return {
              transitionName:''
          }
      },
      watch: {//使用watch 监听$router的变化
        $route(to, from) {
          //如果to索引大于from索引,判断为前进状态,反之则为后退状态
          if(to.meta.index > from.meta.index){
    	    //设置动画名称
            this.transitionName = 'slide-left';
          }else{
            this.transitionName = 'slide-right';
          }
        }
      }
    }
    </script>
    
    

    3.编写slide-left 和 slide-right 类的动画

    .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 监听$router的变化 $route(to, from) { //如果to索引大于from索引,判断为前进状态,反之则为后退状态 if(to.meta.index > from.meta.index) { //设置动画名称 this.transitionName = '...
  • 以上代码就是实现vue页面切换动画效果
  • ##Vue切换页面时的过渡动画 我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画。 import Vue from 'vue'; import Router ...
  • 一般vue项目 都是拿别人弄好的,所以这种动画已经写好了。有的朋友是自己整的,想整个动画。那么 咱们 开整~~~ <transition name="slide-fade"> <router-view class="page"></router-view> </...
  • vue-router 页面切换动画

    千次阅读 2018-01-22 19:34:42
    vue-router 页面切换动画网上一直没翻到 vue-router 翻页动画的完美实现,就心[bei]动[bi]的,编了一个简单的动画组件。支持简单的前进后退的左右动画,针对不支持 history.state 的浏览器,也能支持简单的透明动画...
  • 主要介绍了vue页面切换项目实现转场动画的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 重点: vue2的进入/离开 直接-enter就好了,vue3的需要 -enter-from 其他的都一样; html代码 <router-view class="router-view" v-slot="{ Component }"> <transition :name="transitionName" ...
  • 今天小编就为大家分享一篇使用vue-router切换页面时实现设置过渡动画。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue页面切换动画过渡,很炫酷!

    千次阅读 2019-03-16 16:33:57
    把下面的CSS代码放在入口APP.VUE当中 .slide-fade{ position: fixed;left:0;right: 0; width: 100%; background-color: white; } .slide-fade-enter, .slide-fade-leave-to { left:0;top: 0;right: 0; position...
  • // 视图切换动画逻辑 let history = window.sessionStorage let historyCount = history.getItem('count') * 1 || 0 function routerTransition (to, from) { const toIndex = history.getItem(to.name) const ...
  • Vue已广泛运用于移动开发,页面切换的路由过渡效果有很多方法实现,这里讲的是较简单粗暴的方法,便于理解实现原理。 1. 为需要路由过渡的部分添加<transition></transition>,声明过渡。 <...
  • pageAinimate, vue实现webapp页面切换动画
  • <transition name="fade-transform" mode="out-in"> <router-view></router-view> </transition> 在公共样式中添加 // global transition css /* fade */ .fade-enter-active, ....
  • 1.给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(Vue...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,387
精华内容 2,954
关键字:

vue切换页面动画

vue 订阅