H5仿原生转场动画插件

安装

npm install -S route-t ransition

NUXT 示例

接下来围绕这几个点将: 如何引入nuxt 动画插件的配置如何配置合理 常用场景下的插件配置 如何使用插件并生效

1. 如何引入nuxt 根据官网一件初始化项目后 nuxt.js, 在项目的 nuxt.config.js 文件下:

module. exports = {
  plugins: [
  //引入transition 
  { src: ' ~plugins/transition.js' }],
  transition: {
  // 页面切换动画
  transition: {
     // 建议过渡速率为300   
    duration: 300
  },
  }
}

2. 动画插件的配置如何配置合理 在项目根目录 plugins/transition.js(若无可新建), 代码如下:

import Vue from 'vue'
import RouteTransition from 'route-transition'
import 'route-transition/dist/index.css'

const routeTransition = new RouteTransition({
  duration: 300,
  // 如果匹配上的话，就使用此方向
  // e.g. [旧路径, 新路径]
  needPlain: [
    ['/', '/me']
  ],
  needLeft: [
    ['/', '/forExample']
  ],
  needRight: [
    ['/', '/forExample']
  ],
  // 如果返回true或false，返回true则为无动效
  needPlainFunc (newRoute, oldRoute) {
		return false
  },
  // 如果返回true或false，返回true则为向左滑动
  needLeftFunc (newRoute, oldRoute) {
    return false
  },
  // 如果返回true或false，返回true则为向右滑动
  needRightFunc (newRoute, oldRoute) {
    return false
  }
})

3. 常用场景下的插件配置 常用场景往往是, 一级页面忽略动效, 一级进入子页面动效生效, 那我们需要一个地方设置忽略动效的方法. 同样在 plugins/transition.js 代码如下:

  needPlainFunc (newRoute, oldRoute) {
    // 无动效路由页面名称组合
    let disTran = ['/A', '/B','/C','/D']
    // 切换页面时排查出无动效的路由页面
    let a = disTran.some((x) => x === newRoute.fullPath)
    // 为true 时候,动效不生效
    return a
  },

4. 如何使用插件并生效 同样在 plugins/transition.js 文件下

// 混入进全局的 mixin, 这时候动效会生效
Vue. mixin({
  transition (to, from) {
		if (!from) return 
		return routeTransition.slideDirection(to, from)
  }
 })

效果图：