VUE路由转场特效,WebAPP的前进与后退

更新日期: 2019-02-17阅读: 3601标签: 特效

一、效果图

 

 

二、思路

 1. 定义两个 css 过度动画,前进与后退: slide-right-enter   和   slide-left-enter

 2. 给路由配置meta信息,设置各个路由的级别: index

 3. 监控路由跳转,比对 meta 信息级别,如果从大跳转到小说明是返回,从小跳转到大则是前进

 

三、具体代码

APP.vue

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

<script>
export default {
  name: 'app',
  data () {
    return {
      transitionName: ''
    }
  },
  watch: {
    $route (to, from) {
      if (to.meta.index > from.meta.index) {
        this.transitionName = 'slide-left'
      } else {
        this.transitionName = 'slide-right'
      }
    }
  }
}
</script>

<style lang="scss">
#app {
  color: #2c3e50;
}

//转场动画
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  // 启用硬件加速
  will-change: transform;
  transition: all 300ms;
  position: fixed;
}
.slide-right-enter {
  transform: translate(-100%, 0);
  transition-timing-function: ease-in;
}
.slide-left-enter {
  transform: translate(100%, 0);
  transition-timing-function: ease-in;
}
</style>

router.js 

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { index: 1 }
    },
    {
      path: '/publish',
      name: 'publish',
      component: () => import('./views/Publish.vue'),
      meta: { index: 2 }
    },
    {
      path: '/personal',
      name: 'personal',
      component: () => import('./views/Personal.vue'),
      meta: { index: 2 }
    }
  ]
})


 来自:https://www.cnblogs.com/similar/archive/2019/02/17/10329667.html


链接: https://www.fly63.com/article/detial/2043

也许vue+css3做交互特效更简单

关于vue+css3开发的特效,以及和javascript+css3的对比,就说到这里了,希望这三个小实例,能帮到大家了解下应该怎么使用vue+css3开发特效的。

纯 CSS 创作出平滑的层叠海浪特效

这里的波浪只是侧面的,利用几个平面一部分弧旋转得到。定义 dom,容器中包含一行文本和3条做海浪特效的 <span>,设置容器,文字样式,制作海浪动画效果

js实现图片放大镜特效

在平时网上商城购物时,我们能够通过放大镜效果来使我们看图片能够更加的清楚,今天我就来给大家分享一下我学习的放大镜特效

基于 HTML5 Canvas 实现的文字动画特效

文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读

只需三步,实时多边形折射

在本教程中,您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃。渲染3D对象时,无论使用某种3D软件还是使用WebGL进行实时显示,始终都必须为其分配材料以使其可见并具有所需的外观。

纯CSS3仿网易云孤独星球特效

今天收听网易云音乐时看到孤独星球的特效,于是就顺手搬到这里了。孤独星球特效本身没有什么难点,但如果要加入音轨控制星球运动频率就有点麻烦了

原生JS实现旋转木马轮播图特效

当用户点击左右箭头时,让数组进行相应变化(如果点击右箭头,就删除数组最后那个元素,把它添加到最前边;如果点击左箭头,就删除数组最前边那个元素,把它添加到最后边),改变完数组再调用一下move()函数(让图片轮播)

纯css3实现二维码扫描特效

第一步,实现网格背景:第二部实现扫码线以及渐变背景特效,四角特效就是四个宽高相等的正方形,分别设置边框即可。设置扫描动画

canvas+js实现数字雨特效【字符下落特效】

用dropLine这个列表来记录绘制过程,dropLine[i]的意义是表示在第i列,第dropLine[i]行绘制!filltext()是canvas中的方法,这里的三个参数分别对应:内容,横坐标,纵坐标。

纯js时钟特效

电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!