• 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>
  • 相关阅读:
    [数据备档]源码用的百家姓的数组,实用
    Linq to Sql 与NHibernate数据库操作性能比较研究 测试程序源码
    【技术备档】在WinCE5.0下实现透明背景按钮(.net C#)
    【技术备档】windows平台下快速配置MySQLPython的方法
    反思一下,我为什么需要这些技术?
    一些软件或组件
    Hibernate 与 Spring 多数据源的配置
    asp.net web路径总结
    Ubuntu 中文编码设置
    根据枚举动态扩充datatable列
  • 原文地址:https://www.cnblogs.com/wsj1/p/15238401.html
Copyright © 2020-2023  润新知