feat: 页面切换动画

src/App.vue

@@ -1,15 +1,18 @@
 <template>
   <div>
-    <router-view/>
+    <slide-up-transition>
+      <router-view/>
+    </slide-up-transition>
     <global-message></global-message>
   </div>
 </template>
 
 <script>
 import GlobalMessage from '@/components/Basic/GlobalMessage'
+import SlideUpTransition from '@/animations/SlideUpTransition'
 
 export default {
-  components: { GlobalMessage },
+  components: { GlobalMessage, SlideUpTransition },
   data () {
     return {
       userInfo: {}

src/animations/SlideInDifferentTransition.vue

@@ -0,0 +1,41 @@
+<template>
+  <transition name="slide-in-difference" mode="out-in">
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.slide-in-difference-enter-active {
+  transition: .3s cubic-bezier(0, 0.5, 0.5, 1);
+}
+
+.slide-in-difference-leave-active {
+  transition: .2s cubic-bezier(0, 0.5, 1, 0.5);
+}
+
+.slide-in-difference-leave-to {
+  overflow: hidden;
+  opacity: 0;
+  box-shadow: unset;
+}
+
+.slide-in-difference-enter {
+  position: absolute;
+  overflow: hidden;
+  opacity: 0;
+  box-shadow: unset;
+}
+
+@media (min-width: 600px) {
+  .slide-in-difference-leave-to {
+    transform: translateX(3%);
+  }
+  .slide-in-difference-enter {
+    transform: translateX(3%);
+  }
+}
+</style>

src/animations/SlideInSameTransition.vue

@@ -0,0 +1,40 @@
+<template>
+  <transition name="slide-in-same" mode="out-in">
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.slide-in-same-enter-active {
+  transition: .2s cubic-bezier(0, 0.5, 0.5, 1);
+}
+
+.slide-in-same-leave-active {
+  transition: .3s cubic-bezier(0, 0.5, 0.5, 1);
+}
+
+.slide-in-same-leave-to {
+  opacity: 0;
+  box-shadow: unset;
+  backdrop-filter: unset;
+}
+
+.slide-in-same-enter {
+  opacity: 0;
+  box-shadow: unset;
+  backdrop-filter: unset;
+}
+
+@media (min-width: 600px) {
+  .slide-in-same-leave-to {
+    transform: translateX(-1%);
+  }
+  .slide-in-same-enter {
+    transform: translateX(1%);
+  }
+}
+</style>

src/animations/SlideUpTransition.vue

@@ -0,0 +1,30 @@
+<template>
+  <transition name="slide-up" mode="out-in">
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+@media (min-width: 600px) {
+  .slide-up-enter-active {
+    transition: .5s cubic-bezier(0, 0.5, 0, 1);
+  }
+
+  .slide-up-leave-active {
+    transition: .2s cubic-bezier(0.5, 0, 1, 1);
+  }
+
+  .slide-up-leave-to {
+    opacity: 0;
+  }
+
+  .slide-up-enter {
+    opacity: 0;
+    transform: translateY(1.2%);
+  }
+}
+</style>

src/components/Details/CourseDetail.vue

@@ -13,7 +13,7 @@
         <div>创建时间：</div>
         <div>{{createTime}}</div>
       </div>
-      <div v-if="this.code">
+      <div>
         <div>选课码：</div>
         <div>{{code}}</div>
       </div>

src/components/Layouts/TabSideComponent.vue

@@ -72,18 +72,8 @@ export default {
   padding: 0 24px;
   display: flex;
   align-items: center;
-  &::after {
-    z-index: -1;
-    content: '';
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    backdrop-filter: saturate(120%);
-    background-color: rgba(255, 255, 255, 0.4);
-    pointer-events: none;
-  }
+  background: transparent;
+  box-shadow: 0 0 0 20000px rgba(255,255,255,.5);
 }
 
 @media (min-width: 600px) {

src/style/reset.scss

@@ -5,6 +5,7 @@
 
 body {
   font-family: sans-serif;
+  background: white;
   color: #3a4a5a;
 }
 

src/views/shared/UserHomeLayout.vue

@@ -15,7 +15,9 @@
         </template>
       </div>
       <div class="tab-container">
-        <router-view/>
+        <slide-in-transition>
+          <router-view/>
+        </slide-in-transition>
       </div>
     </div>
 
@@ -40,9 +42,10 @@
 <script>
 import IconButton from '@/components/Basic/IconButton'
 import { logout } from '@/server/user'
+import SlideInTransition from '@/animations/SlideInSameTransition'
 
 export default {
-  components: { IconButton },
+  components: { IconButton, SlideInTransition },
   props: ['tabs', 'role'],
   data () {
     return {
@@ -99,6 +102,11 @@ export default {
   justify-content: center;
 }
 
+.tab-container {
+  overflow: hidden;
+  transition: width .2s;
+}
+
 // 大屏幕情况
 @media (min-width: 600px) {
   .menu-container-large {

src/views/shared/tab-common.scss

@@ -4,6 +4,8 @@
   flex: 1;
   min-width: 340px;
   max-width: 800px;
+  width: 100%;
+  transition: .2s;
 }
 
 .left {
@@ -20,6 +22,7 @@
 .complex-tab {
   display: flex;
   align-items: center;
+  overflow: hidden;
 }
 
 

src/views/student/tabs/StudentCoursesManager.vue

@@ -33,7 +33,9 @@
                      :clickHandler="handleToCourseDetail"></course-card>
       </template>
     </div>
-    <router-view/>
+    <slide-in-different-transition>
+      <router-view/>
+    </slide-in-different-transition>
   </div>
 </template>
 
@@ -43,9 +45,10 @@ import SearchBar from '@/components/Basic/SearchBar'
 import { getCourses, studentGetCourses } from '@/server/course'
 import { SET_COURSE } from '@/store/types/main-types'
 import debounce from '@/utils/debounce'
+import SlideInDifferentTransition from '@/animations/SlideInDifferentTransition'
 
 export default {
-  components: { SearchBar, CourseCard },
+  components: { SearchBar, CourseCard, SlideInDifferentTransition },
   data () {
     return {
       courses: null,

src/views/student/tabs/StudentExplore.vue

@@ -2,7 +2,7 @@
   <div class="tab complex-tab">
     <div class="left">
       <h1 class="title mb-32">我的主页</h1>
-<!--      <search-bar placeholder="输入关键词搜索课件"  class="mb-24"></search-bar>-->
+      <!--      <search-bar placeholder="输入关键词搜索课件"  class="mb-24"></search-bar>-->
       <section>
         <h1 class="sub-title mb-24">按课程查找课件</h1>
         <div class="no-content-warning" v-if="courses === null">
@@ -20,7 +20,9 @@
         </template>
       </section>
     </div>
-    <router-view/>
+    <slide-in-different-transition>
+      <router-view/>
+    </slide-in-different-transition>
   </div>
 </template>
 
@@ -29,9 +31,10 @@ import CourseCard from '@/components/Cards/CourseCard'
 import { studentGetCourses } from '@/server/course'
 import CButton from '@/components/Basic/CButton'
 import { SET_COURSE } from '@/store/types/main-types'
+import SlideInDifferentTransition from '@/animations/SlideInDifferentTransition'
 
 export default {
-  components: { CButton, CourseCard },
+  components: { CButton, CourseCard, SlideInDifferentTransition },
   data () {
     return {
       courses: null

src/views/teacher/tabs/TeacherCoursesManager.vue

@@ -15,7 +15,9 @@
       </template>
       <c-button @click="handleCreateNewCourse" class="full-width secondary">新建课程</c-button>
     </div>
-    <router-view/>
+    <slide-in-different-transition>
+      <router-view/>
+    </slide-in-different-transition>
   </div>
 </template>
 
@@ -24,9 +26,10 @@ import CButton from '@/components/Basic/CButton'
 import CourseCard from '@/components/Cards/CourseCard'
 import { teacherGetCourses } from '@/server/course'
 import { SET_COURSE } from '@/store/types/main-types'
+import SlideInDifferentTransition from '@/animations/SlideInDifferentTransition'
 
 export default {
-  components: { CButton, CourseCard },
+  components: { CButton, CourseCard, SlideInDifferentTransition },
   data () {
     return {
       courses: null

src/views/teacher/tabs/TeacherExplore.vue

@@ -2,7 +2,7 @@
   <div class="tab complex-tab">
     <div class="left">
       <h1 class="title">我的主页</h1>
-<!--      <search-bar></search-bar>-->
+      <!--      <search-bar></search-bar>-->
       <section>
         <h1 class="sub-title">最近编辑</h1>
         <div class="no-content-warning" v-if="slides === null">
@@ -12,7 +12,8 @@
           <div class="no-content-warning-tip">无最近编辑记录～</div>
         </div>
         <template v-for="slide of slides">
-          <slide-card hide-course hide-teacher :key="slide.id" :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
+          <slide-card hide-course hide-teacher :key="slide.id" :slide="slide"
+                      :click-handler="handleSlideCardClick"></slide-card>
         </template>
         <br>
       </section>
@@ -31,7 +32,9 @@
         </template>
       </section>
     </div>
-    <router-view/>
+    <slide-in-different-transition>
+      <router-view/>
+    </slide-in-different-transition>
   </div>
 </template>
 
@@ -44,9 +47,10 @@ import CButton from '@/components/Basic/CButton'
 import { SET_SLIDE_INFO } from '@/store/types/pdf-types'
 import { SET_COURSE } from '@/store/types/main-types'
 import { mapState } from 'vuex'
+import SlideInDifferentTransition from '@/animations/SlideInDifferentTransition'
 
 export default {
-  components: { CButton, CourseCard, SlideCard },
+  components: { CButton, CourseCard, SlideCard, SlideInDifferentTransition },
   data () {
     return {
       courses: null,