zoukankan      html  css  js  c++  java
  • 更换路由时页面实现左右滑动的效果

    切换路由时,页面实现左右滑动的效果(手机端使用场景比较多);
    思路: 路由meta中添加level数字,代表层级,切换路由时,如果level值变小,则右滑动,否则左滑动

    0. 效果

    1. 路由添加滑动标记(router.js文件配置:)

            {
                path: 'test',
                name: 'test',
                meta: {
                    title: "test",
                    level: 1
                },
                component: ...
            },
            {
                path: 'test2',
                name: 'test2',
                meta: {
                    title: "test2",
                    level: 2
                },
                component: ...
            },
    

    2. 为路由组件包裹transition并设置滑动样式

    <template>
      <div style="position:relative;">
        <transition :name="slideName">
          <router-view></router-view>
        </transition>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          slideName: "right"
        };
      },
      watch: {
        $route(to, from) {
          this.slideName = to.meta.level < from.meta.level ? "right" : "left";
        }
      }
    };
    </script>
    
    <style lang="less">
    .left-enter-active,
    .left-leave-active,
    .right-enter-active,
    .right-leave-active {
      transition: all 2s;
      position: absolute; // 这里设置为绝对定位是防止div移动时出现滚动条
       100%;
    }
    .left-enter,
    .right-leave-to {
      opacity: 0;
      transform: translateX(100%);
    }
    .left-leave-to,
    .right-enter {
      opacity: 0;
      transform: translateX(-100%);
    }
    </style>
    
  • 相关阅读:
    1104
    HDU 1575
    hdu 1142(DFS+dijkstra)
    hdu 1015(DFS)
    hdu 1342(DFS)
    hdu 1181(DFS)变 形 课
    hdu 1312(DFS)
    hdu 5976 Detachment
    hdu 5795
    UVa 11729
  • 原文地址:https://www.cnblogs.com/XHappyness/p/12582885.html
Copyright © 2011-2022 走看看