实现动画效果

src/components/ebook/EbookMenu.vue

@@ -1,28 +1,44 @@
 <template>
-  <div class="menu">
-    <div class="text-center pt-3">{{ readSection }}({{ progress / 10 }}%)</div>
-    <div class="d-flex progress-wrapper pb-3">
-      <v-btn :disabled="!navigation" @click="prevSection">上一章</v-btn>
-      <v-slider
-        @end="change2"
-        @mouseup="change(true)"
-        @mousedown="change(false)"
-        :disabled="!bookAvailable"
-        max="1000"
-        min="0"
-        hide-details
-        v-model="progress"
-        class="px-3"
-      />
-      <v-btn :disabled="!navigation" @click="nextSection">下一章</v-btn>
-    </div>
-    <div class="d-flex flex-row menu-item">
-      <v-spacer end="change" v-for="(menuIcon, i) in menuIcons" :key="i" class="d-flex justify-center align-center">
-        <v-btn icon>
-          <v-icon size="32">{{ menuIcon }}</v-icon>
+  <div>
+    <div v-show="menuShow" class="cover" @click="hide"></div>
+    <v-slide-y-transition>
+      <div v-show="menuShow" class="toolbar justify-center align-center">
+        <v-btn icon class="ml-6">
+          <v-icon size="32">{{ icon.mdiArrowLeft }}</v-icon>
         </v-btn>
-      </v-spacer>
-    </div>
+        <v-spacer />
+        <v-btn icon class="mr-6">
+          <v-icon size="32">{{ icon.mdiMagnify }}</v-icon>
+        </v-btn>
+      </div></v-slide-y-transition
+    >
+    <v-slide-y-reverse-transition>
+      <div v-show="menuShow" class="menu">
+        <div class="text-center pt-3">{{ readSection }}({{ progress / 10 }}%)</div>
+        <div class="d-flex progress-wrapper pb-3">
+          <v-btn :disabled="!navigation" @click="prevSection">上一章</v-btn>
+          <v-slider
+            @end="change2"
+            @mouseup="change(true)"
+            @mousedown="change(false)"
+            :disabled="!bookAvailable"
+            max="1000"
+            min="0"
+            hide-details
+            v-model="progress"
+            class="px-3"
+          />
+          <v-btn :disabled="!navigation" @click="nextSection">下一章</v-btn>
+        </div>
+        <div class="d-flex flex-row menu-item">
+          <v-spacer end="change" v-for="(menuIcon, i) in menuIcons" :key="i" class="d-flex justify-center align-center">
+            <v-btn icon>
+              <v-icon size="28">{{ menuIcon }}</v-icon>
+            </v-btn>
+          </v-spacer>
+        </div>
+      </div>
+    </v-slide-y-reverse-transition>
   </div>
 </template>
 
@@ -36,10 +52,12 @@
       return {
         icon: icon,
         menuIcons: [icon.mdiFormatListBulleted, icon.mdiWhiteBalanceSunny, icon.mdiFormatSize],
-        isChange: false
+        isChange: false,
+        promise: null,
       }
     },
     computed: {
+      ...mapGetters(['menuShow']),
       bookAvailable() {
         return this.$store.state.read.bookAvailable
       },
@@ -72,7 +90,7 @@
       }
     },
     methods: {
-      ...mapMutations(['updateReadProgress', 'updateSection']),
+      ...mapMutations(['updateReadProgress', 'updateSection', 'updateMenuShow']),
       ...mapActions(['display', 'refreshLocation']),
       change(value) {
         this.isChange = value
@@ -84,28 +102,57 @@
         })
       },
       prevSection() {
-        if (this.section > 0) {
-          this.updateSection(this.section - 1)
-          this.displaySection()
+        if (!this.promise) {
+          if (this.section > 1) {
+            this.updateSection(this.section - 1)
+            this.displaySection()
+          }
         }
       },
       nextSection() {
-        if (this.section < this.navigation.length) {
-          this.updateSection(this.section + 1)
-          this.displaySection()
+        if (!this.promise) {
+          if (this.section < this.navigation.length) {
+            this.updateSection(this.section + 1)
+            this.displaySection()
+          }
         }
       },
       displaySection() {
-        console.log(this.navigation[this.section - 1].href)
-        this.display(this.navigation[this.section - 1].href).then(() => {
-          this.refreshLocation([false, true])
+        this.displaySectionPromise().then(() => {
+          setTimeout(() => {
+            this.promise = null
+          }, 150)
+        })
+      },
+      displaySectionPromise() {
+        let vueInstance = this
+        this.promise = new Promise(function (resolve, reject) {
+          vueInstance.display(vueInstance.navigation[vueInstance.section - 1].href).then(() => {
+            vueInstance.refreshLocation([false, true])
+            resolve()
+          })
         })
+        return this.promise
+      },
+      hide() {
+        this.updateMenuShow(false)
       }
     }
   }
 </script>
 
 <style scoped lang="scss">
+  .toolbar {
+    width: 100%;
+    height: 64px;
+    position: absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    background: white;
+    box-shadow: 0 8px 8px rgba(#000000, 0.15) !important;
+  }
+
   .menu {
     width: 100%;
     position: absolute;
@@ -123,4 +170,12 @@
       width: 100%;
     }
   }
+
+  .cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 </style>

src/components/ebook/EbookReader.vue

@@ -12,7 +12,7 @@
 
 <script>
   import Epub, { EpubCFI } from 'epubjs'
-  import { mapActions, mapMutations } from 'vuex'
+  import { mapActions, mapGetters, mapMutations } from 'vuex'
   import { flatten, throttle } from '@/util/read'
   import styleURL from '@/assets/styles/read.scss'
   import EbookMenu from '@/components/ebook/EbookMenu'
@@ -26,13 +26,11 @@
           src: null,
           alt: null
         },
-        rendition: null
+        rendition: null,
       }
     },
     computed: {
-      book() {
-        return this.$store.state.read.book
-      },
+      ...mapGetters(['book']),
       navigation() {
         return this.$store.state.read.navigation
       },
@@ -47,10 +45,19 @@
       }
     },
     methods: {
-      ...mapMutations(['updateBook', 'updateCover', 'updateNavigation', 'updateMetadata', 'updateBookAvailable']),
+      ...mapMutations([
+        'updateBook',
+        'updateCover',
+        'updateNavigation',
+        'updateMetadata',
+        'updateBookAvailable',
+        'updateMenuShow'
+      ]),
       ...mapActions(['refreshLocation']),
       hide() {},
-      show() {},
+      show() {
+        this.updateMenuShow(true)
+      },
       prevPage() {
         console.log('上一页')
         if (this.rendition) {
@@ -212,7 +219,7 @@
       window.removeEventListener('keydown', this.handleKeyDown)
     },
     mounted() {
-      const fileName = 'Test1.epub'
+      const fileName = 'Test2.epub'
       this.initEpub(new Epub(fileName))
     }
   }

src/plugins/vuetify.js

@@ -1,12 +1,13 @@
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib/framework'
-import { mdiMagnify, mdiFormatSize,mdiFormatListBulleted ,mdiWhiteBalanceSunny} from '@mdi/js'
+import { mdiMagnify, mdiFormatSize, mdiFormatListBulleted, mdiWhiteBalanceSunny, mdiArrowLeft } from '@mdi/js'
 
 Vue.use(Vuetify)
 
 export default new Vuetify({})
 
 export const icon = {
+  mdiArrowLeft,
   mdiMagnify,
   mdiFormatSize,
   mdiFormatListBulleted,

src/store/read.js

@@ -9,12 +9,19 @@ export default {
     metadata: null,
     bookAvailable: false,
     readProgress: 0,
-    section: 1
+    section: 1,
+    menuShow: false
   },
   getters: {
     readSection(state) {
       if (state.navigation) return state.navigation[state.section - 1]?.label
       else return state.metadata?.title
+    },
+    book(state) {
+      return state.book
+    },
+    menuShow(state) {
+      return state.menuShow
     }
   },
   mutations: {
@@ -38,11 +45,15 @@ export default {
     },
     updateSection(state, payload) {
       state.section = payload
+    },
+    updateMenuShow(state, payload) {
+      state.menuShow = payload
     }
   },
   actions: {
-    refreshLocation({ commit, state },[isSection,isProgress]) {
+    refreshLocation({ commit, state }, [isSection, isProgress]) {
       const currentLocation = state.book.rendition.currentLocation()
+      // console.log(currentLocation)
       if (currentLocation && currentLocation.start) {
         const startCfi = currentLocation.start.cfi
         // if (isSave) saveReadProgress(this.fileName, startCfi)
@@ -85,7 +96,7 @@ export default {
             }
           }
           if (isProgress) {
-            commit('updateReadProgress',Math.floor(currentLocation.start.percentage * 1000))
+            commit('updateReadProgress', Math.floor(currentLocation.start.percentage * 1000))
           }
         }
       }