Vue路由动画浅入浅出简单实现

今天药忘吃喽~ 2023-01-18 04:11 162阅读 0赞

## Vue路由动画 ##

最近想自己开发一个博客网站，本来想用js jq 原生写，后来发现mvc的框架实在有点强差人意。索性就直接用了vue，然后我又发现一个页面的跳转效果也有点差人意，我就想到vue的路由动画，下面给大家实例一种简单的路由动画。

## 路由 ##

重新给路由添加下标，在定义路由时添加meta属性，定义index，然后在页面监听路由，根据index的大小决定添加哪种动画。

> 在route的index.js里面

const routes = [
      { 
        path: '/',
        name: 'Home',
        component: Home,
        meta:{ index:0},
      },
      { 
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue'),
        meta:{ index:1},
      },
      { 
        path: '/login',
        name: 'Login',
        component: () => import('../views/view/Login.vue'),
        meta:{ index:2},
      }
    ]

> 在App.vue 中添加

<template>
      <div id="app">
            <transition :name="transitionName">
                    <router-view class="child-view"> </router-view>
            </transition>
      </div>
    </template>

> 使用transition属性包裹路由 然后在watch中监听路由动向 就是判断meta的index大小

<script>
    export default { 
      name: 'App',
      data(){ 
          return { 
              transitionName: ''
              //设置成空值 路由切换时在进行赋值
          }
      },
     
    watch: { 
        $route(to, from) { 
        //利用watch监听属性来进行样式改变
            if (to.meta.index > from.meta.index) { 
                this.transitionName = "slide-left";
            } else { 
                this.transitionName = "slide-right";
            }
        }
    }
    }
    </script>

> 最后在Css中完成最后的动态设置

<style lang="scss">
    .child-view { 
        position: absolute;
        width:100%;
        transition: all .4s ;
    }
    .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>

一个简单的路由动画就实现了

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关『浅入浅出』MySQL 和 InnoDB

本人免费整理了Java高级资料，涵盖了Java、Redis、MongoDB、MySQL、Zookeeper、Spring Cloud、Dubbo高并发分布式等教程，一共30G，

今天药忘吃喽~/ 2023年10月10日 08:37/ 0 赞/ 24 阅读

相关 Gradle 浅入浅出

环境介绍 OpenJDK 17.0.5 Gradle 7.6 [示例代码 fly-gradle][fly-gradle] Gradle 项目下文件介

妖狐艹你老母/ 2023年09月24日 23:39/ 0 赞/ 107 阅读

相关浅入浅出Spring架构设计

前言为什么需要Spring? 什么是Spring? 对于这样的问题，大部分人都是处于一种朦朦胧胧的状态，说的出来，但又不是完全说的出来，今天我们就以架构设计的

客官°小女子只卖身不卖艺/ 2023年09月23日 20:19/ 0 赞/ 45 阅读

相关『浅入浅出』MySQL 和 InnoDB

MySQL 的架构 MySQL 从第一个版本发布到现在已经有了 20 多年的历史，在这么多年的发展和演变中，整个应用的体系结构变得越来越复杂： ![Logical-Vi

本是古典何须时尚/ 2023年07月17日 09:53/ 0 赞/ 7 阅读

相关浅入浅出 kvm qemu libvirt

KVM KVM是linux内核的模块，它需要CPU的支持，采用硬件辅助虚拟化技术Intel-VT，AMD-V，内存的相关如Intel的EPT和AMD的RVI技术，Guest

浅浅的花香味﹌/ 2023年02月25日 10:21/ 0 赞/ 178 阅读

相关 Vue路由动画浅入浅出简单实现

Vue路由动画最近想自己开发一个博客网站，本来想用js jq 原生写，后来发现mvc的框架实在有点强差人意。索性就直接用了vue，然后我又发现一个页面的跳转效果也有点差

今天药忘吃喽~/ 2023年01月18日 04:11/ 0 赞/ 163 阅读

相关浅入浅出Android安全（中文版）

浅入浅出Android安全（中文版）来源：[Yury Zhauniarovich | Publications][Yury Zhauniarovich _ Public

待我称王封你为后i/ 2022年05月16日 04:10/ 0 赞/ 184 阅读

相关 Es6 generator浅入浅出

生成器生成器是特殊的函数。生成器函数在执行时能暂停，后面又能从暂停处执行。 show me the coding function zcGenerator()

朴灿烈づ我的快乐病毒、/ 2022年01月20日 00:21/ 0 赞/ 237 阅读

相关浅入深出Vue：第一个页面

今天正式开始入门篇，也就是实战了~ 首先我们是要做一个博客网站，UI 框架采用江湖传闻中的 ElementUI，今天我们就来利用它确定我们博客网站的基本布局吧。准备工作

朴灿烈づ我的快乐病毒、/ 2021年12月05日 13:21/ 0 赞/ 299 阅读

相关 Linux内核浅入浅出

公众号关注「开源Linux」回复「学习」，有我为您特别筛选的学习资料~ 01 前言拥有超过1300万行的代码，Linux内核是世界上最大的开源项目之一，但

我会带着你远行/ 2021年07月26日 17:37/ 0 赞/ 371 阅读