vue 页面进出类似APP的滑动效果

Myth丶恋晨 2022-03-11 05:06 253阅读 0赞

### 实现vue进入返回实现页面的左右滑动效果 ###

在项目开发中，感觉页面的切换很是生硬，仿照原生APP实现进出页面左右滑动的效果

> 首先要知道当前操作是进入页面还是返回

在 router 里加一项, 类似这样,添加一个meta，用里面的index来判断页面层级

routes: [
        {
          // 默认的首页
          path: '/',
          name: 'Home',
          component: Home,
          meta: {index: 0}
        },
        {
          // 选择城市
          path: '/city',
          name: 'City',
          component: City,
          meta: {index: 1}
        }
    ]

> 在app.vue里面进行判断， index值越小代表层级越大， index小则是返回，index大则是进入

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

> 那么 transition 组件的动画名字就根据是进入还是返回来给它对应的动画

>  如果有 **keep-alive** ，那么要把它包裹在 transition 动画组件里面

最后，想要动画效果还是离不开CSS

> **CSS**左滑右滑效果

@keyframes slideInLeft {
        from {
          transform: translate3d(100%, 0, 0);
          position: fixed;
          top: 0;
          left: 0;
          opacity: 1;
        }
        to {
          transform: translate3d(0, 0, 0);
          position: fixed;
          top: 0;
          left: 0;
          opacity: 1;
        }
      }
      @keyframes slideInRight {
        from {
          transform: translate3d(0%, 0, 0);
          position: fixed;
          top: 0;
          left: 0;
          opacity: 1;
        }
        to {
          transform: translate3d(-100%, 0, 0);
          position: fixed;
          top: 0;
          left: 0;
          opacity: 1;
        }
      }
      .slide-left-enter-active{
        position: fixed;
        top: 0;
        left: 0%;
        width: 100vw;
        height: 100vh;
        animation: slideInLeft .2s linear forwards;
      }
      .slide-left-leave-active{
        position: fixed;
        top: 0;
        left: 0%;
        width: 100vw;
        height: 100vh;
        animation: slideInRight .2s linear forwards;
      }
      /*向右滑动*/
      @keyframes slideOutLeft {
        from {
          transform: translate3d(-100%, 0, 0);
          position: fixed;
          top: 0;
          left: 0;
          opacity: 1;
        }
        to {
          transform: translate3d(0%, 0, 0);
          position: fixed;
          top: 0;
          left: 0;
          opacity: 1;
        }
      }
      @keyframes slideOutRight {
        from {
          transform: translate3d(0%, 0, 0);
          position: fixed;
          top: 0;
          left: 0;
          opacity: 1;
        }
        to {
          transform: translate3d(100%, 0, 0);
          position: fixed;
          top: 0;
          left: 0;
          opacity: 1;
        }
      }
      .slide-right-enter-active{
        position: fixed;
        top: 0;
        left: 0%;
        width: 100vw;
        height: 100vh;
        animation: slideOutLeft .2s linear forwards;
      }
      .slide-right-leave-active{
        position: fixed;
        top: 0;
        left: 0%;
        width: 100vw;
        height: 100vh;
        animation: slideOutRight .2s linear forwards;
      }

页面切换动画实现了之后，感觉逼格都提高了一些呢。。。哈哈哈哈