fix(theme-reco): fix animation

Author: reco_luan

packages/vuepress-theme-reco/components/Common.vue

@@ -77,11 +77,8 @@ import Sidebar from '@theme/components/Sidebar'
 import PersonalInfo from '@theme/components/PersonalInfo'
 import Password from '@theme/components/Password'
 import { setTimeout } from 'timers'
-import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
-  mixins: [moduleTransitonMixin],
-
   components: { Sidebar, Navbar, Password, PersonalInfo },
 
   props: {
@@ -92,6 +89,10 @@ export default {
     sidebarItems: {
       type: Array,
       default: () => []
+    },
+    recoShowModule: {
+      type: Boolean,
+      default: false
     }
   },
 

packages/vuepress-theme-reco/components/Home.vue

@@ -45,12 +45,13 @@
 <script>
 import NavLink from '@theme/components/NavLink'
 import { ModuleTransition } from '@vuepress-reco/core/lib/components'
-import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
-  mixins: [moduleTransitonMixin],
   components: { NavLink, ModuleTransition },
   computed: {
+    recoShowModule () {
+      return this.$parent.recoShowModule
+    },
 
     actionLink () {
       return {

packages/vuepress-theme-reco/components/HomeBlog.vue

@@ -74,10 +74,9 @@ import pagination from '@theme/mixins/pagination'
 import { ModuleTransition, RecoIcon } from '@vuepress-reco/core/lib/components'
 import PersonalInfo from '@theme/components/PersonalInfo'
 import { getOneColor } from '@theme/helpers/other'
-import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
-  mixins: [pagination, moduleTransitonMixin],
+  mixins: [pagination],
   components: { NoteAbstract, TagList, FriendLink, ModuleTransition, PersonalInfo, RecoIcon },
   data () {
     return {
@@ -87,6 +86,9 @@ export default {
     }
   },
   computed: {
+    recoShowModule () {
+      return this.$parent.recoShowModule
+    },
     homeBlogCfg () {
       return this.$recoLocales.homeBlog
     },

packages/vuepress-theme-reco/components/Page.vue

@@ -82,11 +82,9 @@
 import PageInfo from '@theme/components/PageInfo'
 import { resolvePage, outboundRE, endingSlashRE } from '@theme/helpers/utils'
 import { ModuleTransition } from '@vuepress-reco/core/lib/components'
-import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 import SubSidebar from '@theme/components/SubSidebar'
 
 export default {
-  mixins: [moduleTransitonMixin],
   components: { PageInfo, ModuleTransition, SubSidebar },
 
   props: ['sidebarItems'],
@@ -98,6 +96,9 @@ export default {
   },
 
   computed: {
+    recoShowModule () {
+      return this.$parent.recoShowModule
+    },
     // 是否显示评论
     shouldShowComments () {
       const { isShowComments } = this.$frontmatter

packages/vuepress-theme-reco/components/Password.vue

@@ -44,10 +44,8 @@
 <script>
 import md5 from 'md5'
 import { ModuleTransition, RecoIcon } from '@vuepress-reco/core/lib/components'
-import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
-  mixins: [moduleTransitonMixin],
   components: { ModuleTransition, RecoIcon },
   props: {
     isPage: {
@@ -63,6 +61,9 @@ export default {
     }
   },
   computed: {
+    recoShowModule () {
+      return this.$parent.recoShowModule
+    },
     year () {
       return new Date().getFullYear()
     }

packages/vuepress-theme-reco/layouts/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <Common :sidebarItems="sidebarItems">
+  <Common :sidebarItems="sidebarItems" :recoShowModule="recoShowModule">
     <component v-if="$frontmatter.home" :is="homeCom"/>
     <Page v-else :sidebar-items="sidebarItems"/>
     <Footer v-if="$frontmatter.home" class="footer" />
@@ -13,8 +13,10 @@ import Page from '@theme/components/Page'
 import Footer from '@theme/components/Footer'
 import Common from '@theme/components/Common'
 import { resolveSidebarItems } from '@theme/helpers/utils'
+import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
 
 export default {
+  mixins: [moduleTransitonMixin],
   components: { HomeBlog, Home, Page, Common, Footer },
   computed: {
     sidebarItems () {

packages/vuepress-theme-reco/mixins/moduleTransiton.js

@@ -8,8 +8,11 @@ export default {
     this.recoShowModule = true
   },
   watch: {
-    '$route' () {
+    '$route' (newV, oldV) {
+      if (newV.path === oldV.path) return
+
       this.recoShowModule = false
+
       setTimeout(() => {
         this.recoShowModule = true
       }, 200)