@yoyohan1/vue-page-transition

vue-page-transition

描述

原版地址：https://github.com/Orlandster/vue-page-transition https://www.npmjs.com/package/vue-page-transition

我的地址：https://gitee.com/yoyohan1/vue-page-transition https://www.npmjs.com/package/@yoyohan1/vue-page-transition

vue页面动画跳转插件 转自npm上的vue-page-transition 略微修改了一下实现了在meta中配置fade-in-left页面

原版项目比较老 npm run build时遇到了点小问题:

1. package.json 中修改为"eslint-plugin-html": "^3.0.0",

2. package.json同级目录下新建.babelrc文件（windows电脑不能直接创建.babelrc文件时 创建.babelrc.即可） 内容为：

   {
     "presets": [
       ["env", { "modules": false }],
       "stage-3"
     ]
   }
   

3. cnpm install babel-preset-env --save-dev

4. npm run build即可

示例

{
    path: '/admin_user/edit/:username',
    component: AdminUserEdit,
    name: 'AdminUserEdit',
    props: true,
    meta: {
        '/my': 'fade-in-left',//标识去这个路径将使用fade-in-left
        '/admin_user/list': 'fade-in-left',//标识去这个路径将使用fade-in-left
    },
},

<vue-page-transition :name="transitionName">
  <keep-alive>
    <router-view class="Router" v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
</vue-page-transition>

//默认使用fade-in-right 
transitionName: 'fade-in-right',


//修改原版 如果在from的meta中配置过to将要使用的transitionName就使用
created () {
    this.$router.beforeEach((to, from, next) => {
      this.transition = from.meta[to.path]
        ? from.meta[to.path]
        : this.$props.name

      next()
    })
  },