no message

Former-commit-id: 328a8c2f51b53c492f584cf6990ee4794f905abe
Former-commit-id: e3614b740d757eead66270283e9ac8a23c6fc4e8
Former-commit-id: 0b8adba2e8e4f0f971dabd7575a542cfdddf9597

src/assets/style/animate/vue-transition.scss

@@ -1,15 +1,27 @@
-// 过渡动画
+// 过渡动画 横向渐变
-.fade-enter-active {
+.fade-transverse-leave-active,
+.fade-transverse-enter-active {
   transition: all .5s;
 }
-.fade-leave-active {
+.fade-transverse-enter {
-  transition: all .5s;
-}
-.fade-enter {
   opacity: 0;
   transform: translateX(-30px);
 }
-.fade-leave-to {
+.fade-transverse-leave-to {
   opacity: 0;
   transform: translateX(30px);
 }
+
+// 过渡动画 缩放渐变
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all .5s;
+}
+.fade-scale-enter {
+  opacity: 0;
+  transform: scale(1.2);
+}
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}

src/components/core/MainLayout/index.vue

@@ -16,7 +16,7 @@
         <SideMenu :collapse="collapse"></SideMenu>
       </el-aside>
       <el-main>
-        <transition name="fade">
+        <transition name="fade-transverse">
           <router-view></router-view>
         </transition>
       </el-main>

src/components/demo/PageIndexArticle/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="page-index-body">
+  <div class="page-index-article-body">
-    <div class="page-index-body__logo">
+    <div class="page-index-article-body__logo">
       <slot></slot>
     </div>
-    <p class="page-index-body__title">{{title}}</p>
+    <p class="page-index-article-body__title">{{title}}</p>
-    <p class="page-index-body__sub-title dd-mt-0">{{subTitle}}</p>
+    <p class="page-index-article-body__sub-title dd-mt-0">{{subTitle}}</p>
   </div>
 </template>
 
@@ -25,17 +25,16 @@ export default {
 }
 </script>
 
-
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
-.page-index-header {
+.page-index-article-header {
   overflow: hidden;
-  .page-index-header__title {
+  .page-index-article-header__title {
     display: inline-block;
     padding: 12px 20px;
   }
 }
-.page-index-body {
+.page-index-article-body {
   position: absolute;
   top: 0px;
   bottom: 0px;
@@ -45,15 +44,15 @@ export default {
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
-  .page-index-body__logo {
+  .page-index-article-body__logo {
     img {
       width: 200px;
     }
   }
-  .page-index-body__title {
+  .page-index-article-body__title {
     color: $color-text-main;
   }
-  .page-index-body__sub-title {
+  .page-index-article-body__sub-title {
     color: $color-text-sub;
   }
 }