Pārlūkot izejas kodu

✨ feat(Layout): 添加页面切换动画效果,优化用户体验;隐藏滚动条

Mcal 4 dienas atpakaļ
vecāks
revīzija
bb8d3e4c9e
1 mainītis faili ar 18 papildinājumiem un 0 dzēšanām
  1. 18 0
      src/views/layout/index.vue

+ 18 - 0
src/views/layout/index.vue

@@ -6,7 +6,9 @@
                 <Menu @click="handleClick(item)" v-for="item in menus" :info="item" />
             </div>
             <div class=" flex-1 overflow-y-auto">
+              <Transition name="slide-right" >
                 <router-view />
+              </Transition>
             </div>
         </div>
     </div>
@@ -63,6 +65,18 @@ function handleClick(m) {
 }
 </script>
 <style scoped lang="scss">
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.5s ease;
+}
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+}
 .main {
   width: 100%;
   height: 100vh;
@@ -80,4 +94,8 @@ function handleClick(m) {
     }
   }
 }
+// 隐藏滚动条
+::-webkit-scrollbar {
+  display: none;
+}
 </style>