refactor(vuepress-theme-reco): module transition

Author: reco_luan

packages/@vuepress-reco/core/src/components/ModuleTransition.tsx

@@ -1,8 +1,6 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 
-import '../../stylus/ModuleTransition.styl'
-
 const ModuleTransitionProps = Vue.extend({
   props: {
     delay: {
@@ -12,20 +10,26 @@ const ModuleTransitionProps = Vue.extend({
     duration: {
       type: String,
       default: '.25'
+    },
+    transform: {
+      type: Array,
+      default () {
+        return ['translateY(-20px)', 'translateY(0)']
+      }
     }
   }
 })
 
 @Component
 class ModuleTransition extends ModuleTransitionProps {
   setStyle (items) {
-    items.style.transition = `all ${this.duration}s ease-in-out ${this.delay}s`
-    items.style.transform = 'translateY(-20px)'
+    items.style.transition = `transform ${this.duration}s ease-in-out ${this.delay}s, opacity ${this.duration}s ease-in-out ${this.delay}s`
+    items.style.transform = this.transform[0]
     items.style.opacity = 0
   }
 
   unsetStyle (items) {
-    items.style.transform = 'translateY(0)'
+    items.style.transform = this.transform[1]
     items.style.opacity = 1
   }
 
@@ -34,13 +38,13 @@ class ModuleTransition extends ModuleTransitionProps {
       <transition
         {
           ...{
-            attrs: {
-              name: 'module'
-            },
+            attrs: { name: 'module' },
             on: {
               enter: this.setStyle,
-              'after-enter': this.unsetStyle,
-              'before-leave': this.setStyle
+              appear: this.setStyle,
+              'before-leave': this.setStyle,
+              'after-appear': this.unsetStyle,
+              'after-enter': this.unsetStyle
             }
           }
         }

packages/@vuepress-reco/core/stylus/ModuleTransition.styl

@@ -3,16 +3,16 @@
 		<a class="color-button" @click.prevent="showMenu = !showMenu">
       <reco-icon icon="reco-color" />
 		</a>
-		<transition name="menu-transition" mode="out-in">
+		<ModuleTransition :transform=" ['translate(-50%, 0)', 'translate(-50%, -10px)']">
 			<div v-show="showMenu" class="color-picker-menu">
 				<ModePicker />
 			</div>
-		</transition>
+		</ModuleTransition>
 	</div>
 </template>
 
 <script>
-import { RecoIcon } from '@vuepress-reco/core/lib/components'
+import { RecoIcon, ModuleTransition } from '@vuepress-reco/core/lib/components'
 import ClickOutside from 'vue-click-outside'
 import ModePicker from './ModePicker'
 import applyMode from './applyMode'
@@ -26,7 +26,8 @@ export default {
 
   components: {
     ModePicker,
-    RecoIcon
+    RecoIcon,
+    ModuleTransition
   },
 
   data () {
@@ -80,17 +81,7 @@ export default {
 		position: absolute;
 		top: 40px;
 		left: 50%;
-		transform: translateX(-50%);
 		z-index: 150;
-		&.menu-transition-enter-active,
-		&.menu-transition-leave-active {
-			transition: all 0.25s ease-in-out;
-		}
-		&.menu-transition-enter,
-		&.menu-transition-leave-to {
-			top: 50px;
-			opacity: 0;
-		}
 
 		ul {
 			list-style-type: none;

packages/vuepress-theme-reco/components/Mode/index.vue

@@ -7,7 +7,12 @@ export default {
   mounted () {
     this.recoShowModule = true
   },
-  destroyed () {
-    this.recoShowModule = false
+  watch: {
+    '$route' () {
+      this.recoShowModule = false
+      setTimeout(() => {
+        this.recoShowModule = true
+      }, 200)
+    }
   }
 }