• vue3路由过渡动画


    <template>
      <div>
        <!-- <router-view id="router" /> -->
        <loading :routename="isname" />
        <router-view v-slot="{ Component }" id="router">
          <transition :name="transitionName">
            <keep-alive include="ProductList">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
        <TabBar
          style="position: absolute !important; left: 0; right: 0; bottom: 0;height:60px;z-index:100"
        />
      </div>
    </template>
    <script>
    import TabBar from './components/tabbar.vue'
    import { ref } from 'vue'
    import { onBeforeRouteUpdate, useRoute } from 'vue-router'
    import { Loading } from 'vant'
    import loading from '@/components/loading'
    export default {
      name: 'Home',
      components: {
        TabBar,
        [Loading.name]: Loading,
        loading
      },
      setup () {
        // const router = useRouter()
        const route = useRoute()
        const isname = ref(route.name)
        const transitionName = ref('slide-left')
        onBeforeRouteUpdate((to, from) => {
          const { index: toIndex } = to.meta
          const { index: fromIndex } = from.meta
          console.log(toIndex, fromIndex, toIndex < fromIndex)
          transitionName.value = toIndex < fromIndex ? 'slide-right' : 'slide-left'
          console.log(transitionName.value)
          isname.value = to.name
        })
        return {
          transitionName,
          isname
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    #router {
      height: calc(100vh - 50px);
      overflow-y: auto;
    }
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
       100vw;
      will-change: transform;
      transition: all 500ms;
      // position: absolute;
    }

    .slide-right-enter {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }

    .slide-right-leave-active {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }

    .slide-left-enter {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }

    .slide-left-leave-active {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    </style>
  • 相关阅读:
    链表-(1)
    爬虫(10-3)验证码图片识别
    爬虫10-2(多线程爬虫)
    分布式爬虫系统的架构(19)
    pipenv管理Python虚拟环境
    peewee-async集成到tornado
    Python3笔记051
    Python3笔记050
    Python3笔记049
    Python3笔记048
  • 原文地址:https://www.cnblogs.com/wsj1/p/15238401.html
Copyright © 2020-2023  润新知