# vue-page-transition

**Repository Path**: yoyohan1/vue-page-transition

## Basic Information

- **Project Name**: vue-page-transition
- **Description**: vue页面动画跳转插件2
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-11
- **Last Updated**: 2022-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-page-transition

![](demo.gif)

# 描述

原版地址：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. 参考博客：解决问题（[ ERROR in xx..js from UglifyJs Unexpected token: punc (()](https://www.cnblogs.com/yalong/p/10694088.html)）

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

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

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

4. npm run build即可


# 示例

```
//router/index.js
{
    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
    },
},

//src/views/Main.vue
<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',

//修改原版src/components/VuePageTransition.vue 如果在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()
    })
  },

```