标签：动画 const transform slide vue3 active import 路由 left

<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 {   width: 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>

标签：动画,const,transform,slide,vue3,active,import,路由,left
来源： https://www.cnblogs.com/wsj1/p/15238401.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。