vue_cli动画

常见动画–从右向左显示

在路由index.js中

{
  path: '/parent',
  name: 'Parent',
  component: Parent,
  children: [
    {
      path: '/parent/ChildrenA',
      name: 'ChildrenA',
      component: ChildrenA
    }
  ]
},

在父组件中

<template>
  <div class="parent">
    <div @click="clickA">点我跳转到ChildrenA界面并且有动画</div>
    <transition> <!-- 给路由出口设置动画 -->
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'Parent',
  methods: {
    clickA () {
      this.$router.push({
        path: '/parent/ChildrenA'
      })
      console.log('clickA...')
    }
  }
}
</script>
<style lang="scss">
  .parent{
    /*给路由出口设置动画*/
    .v-enter{
      transform: translateX(100%);
    }
    .v-enter-to{
      transform: translateX(0%);
    }
    .v-enter-active{
      transition: transform 0.5s;
    }
    .v-leave{
      transform: translateX(0%);
    }
    .v-leave-to{
      transform: translateX(100%);
    }
    .v-leave-active{
      transition: transform 0.5s;
    }
  }
</style>

在要跳转的目标组件中

<template>
  <div class="childrenA">
    <div @click="$router.go(-1)">返回上一页</div>
    <div>我是ChildrenA</div>
  </div>
</template>
<script>
export default {
  name: 'ChildrenA'
}
</script>
<style lang="scss">
  .childrenA{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: red;
  }
</style>

结果

点击跳转	从右向左显示	显示完

常见动画–封装在router.js

在路由router.js中

// 防止点击重复路由报错
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error => error)
}

// 需要左方向动画的路由用this.$router.togo('****')
VueRouter.prototype.togo = function (pathName, paramsObj) {
  this.isleft = true
  this.isright = false
  this.push({
    name: pathName,
    params: paramsObj
  })
}
// 需要右方向动画的路由用this.$router.goRight('****')
VueRouter.prototype.goRight = function (path) {
  this.isright = true
  this.isleft = false
  this.push(path)
}
// 需要返回按钮动画的路由用this.$router.goBack()，返回上一个路由
VueRouter.prototype.goBack = function () {
  this.isright = true
  this.isleft = false
  this.go(-1)
}
// 点击浏览器返回按钮执行，此时不需要路由回退
VueRouter.prototype.togoback = function () {
  this.isright = true
  this.isleft = false
}
// 点击浏览器前进按钮执行
VueRouter.prototype.togoin = function () {
  this.isright = false
  this.isleft = true
}
// 点击跳转页面并传参数
VueRouter.prototype.goQuery = function (pathName, paramsObj) {
  this.isleft = true;
  this.isright = false;
  this.push({
    path: pathName,
    query: paramsObj
  })
}

在App.vue中

<template>
    <div id="app">
        <transition :name="transitionName">
            <router-view class="Router"></router-view>
        </transition>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                transitionName: "",
            };
        },
        watch: {
            $route() {
                if (this.$router.isleft) {
                    this.transitionName = "slideleft";
                }
                if (this.$router.isright) {
                    this.transitionName = "slideright";
                }
            },
        },
    }
</script>

<style lang="scss">
    .Router {
        /*background: #f7f5f5;*/
        /*display: flex;*/
        /*flex-direction: column;*/
        // justify-content: space-between;
        /*align-items: stretch;*/
        width: 100%;
        min-height: 100vh;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
    }
    .slideleft-enter, .slideright-leave-active {
        opacity: 1;
        transform: translate3d(90%, 0, 0);
        -webkit-transform: translate3d(90%, 0, 0);
        -moz-transform: translate3d(90%, 0, 0);
    }
    .slideleft-leave-active, .slideright-enter {
        opacity: 1;
        transform: translate3d(-90%, 0, 0);
        -webkit-transform: translate3d(-90%, 0, 0);
        -moz-transform: translate3d(-90%, 0, 0);
    }
    /* 公共样式 */
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #333;
    }
</style>

在要跳转的组件中

<template>
    <div class="test">
        <div v-for="(item, i) in myData" :key="i">
            <van-button @click="navTo('/parent', item)">跳转parent</van-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Test",
        data () {
            return {
                myData: [
                    {
                        name: "陈",
                        age: 18
                    },
                ]
            }
        },
        methods: {
            navTo (url, params) {
                console.log(params);
                this.$router.goQuery(url, { params: JSON.stringify(params) });
            },
        }
    }
</script>

<style lang="less">
.test{
    width: 100%;
    height: 100%;
    background-color: #999;
}
</style>

在要接收的组件中

<template>
    <div class="parent">
        <div>我是parent</div>
        <div>我接收到url传递的params是： {{paramsData}}</div>
    </div>
</template>

<script>
    export default {
        name: "Parent",
        data () {
            return {
                paramsData: {}
            }
        },
        mounted() {
            this.paramsData = JSON.parse(this.$route.query.params);
            console.log(this.paramsData);
        }
    }
</script>

<style lang="less">
.parent{
    width: 100%;
    height: 100%;
    background-color: #ccc;
}
</style>

结果

点击跳转	从右向左显示	显示完