From 15d4e95b5744a62a02e047adc828dc393a97f3bb Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Wed, 9 Aug 2023 23:19:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=BF=87=E6=B8=A1=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/anim.scss     |  17 ++++
 src/assets/css/style.scss    |   1 +
 src/components/DictModal.vue | 160 ++++++++++++++++++-----------------
 src/components/WordList.vue  |  34 +++++---
 4 files changed, 119 insertions(+), 93 deletions(-)
 create mode 100644 src/assets/css/anim.scss

diff --git a/src/assets/css/anim.scss b/src/assets/css/anim.scss
new file mode 100644
index 00000000..c7e7c7a2
--- /dev/null
+++ b/src/assets/css/anim.scss
@@ -0,0 +1,17 @@
+.list-move, /* 对移动中的元素应用的过渡 */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* 确保将离开的元素从布局流中删除
+  以便能够正确地计算移动的动画。 */
+.list-leave-active {
+  position: absolute;
+}
\ No newline at end of file
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 4165abf4..c95da7a5 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -1,5 +1,6 @@
 @import "@icon-park/vue-next/styles/index.css";
 @import "colors";
+@import "anim";
 
 html, body {
   padding: 0;
diff --git a/src/components/DictModal.vue b/src/components/DictModal.vue
index 122e4a89..94a989c5 100644
--- a/src/components/DictModal.vue
+++ b/src/components/DictModal.vue
@@ -42,92 +42,94 @@ async function selectDict(item: Dict) {
 </script>
 
 <template>
-  <div class="modal-root" :class="store.dictModalIsOpen ? 'show':'hide'">
-    <div class="modal-mask" @click="store.dictModalIsOpen = false"></div>
-    <div class="modal">
-      <div class="modal-body">
-        <div class="slide">
-          <div class="slide-list" :class="`step${step}`">
-            <div class="dict-page">
-              <header>
-                <div class="tabs">
-                  <div class="tab">
-                    <span>英语</span>
+  <Teleport to="body">
+    <div class="modal-root" :class="store.dictModalIsOpen ? 'show':'hide'">
+      <div class="modal-mask" @click="store.dictModalIsOpen = false"></div>
+      <div class="modal">
+        <div class="modal-body">
+          <div class="slide">
+            <div class="slide-list" :class="`step${step}`">
+              <div class="dict-page">
+                <header>
+                  <div class="tabs">
+                    <div class="tab">
+                      <span>英语</span>
+                    </div>
+                    <div class="tab">
+                      <span>日语</span>
+                    </div>
+                    <div class="tab">
+                      <span>德语</span>
+                    </div>
                   </div>
-                  <div class="tab">
-                    <span>日语</span>
+                  <close @click="store.dictModalIsOpen = false" theme="outline" size="20" fill="#929596"
+                         :strokeWidth="2"/>
+                </header>
+                <div class="page-content">
+                  <div class="dict-list-wrapper">
+                    <div class="tags">
+                      <div class="tag" :class="i === 5 &&'active'" v-for="i in 2">六级</div>
+                    </div>
+                    <div class="dict-list">
+                      <div class="dict-item"
+                           :class="currentSelectDict.name === i.name && 'active'" v-for="i in childrenEnglish"
+                           @click="selectDict(i)"
+                      >
+                        <div class="name">{{ i.name }}</div>
+                        <div class="desc">{{ i.description }}</div>
+                        <div class="num">{{ i.length }}词</div>
+                        <arrow-right v-if="currentSelectDict.name === i.name"
+                                     @click.stop="step = 1"
+                                     class="go" theme="outline" size="20" fill="#ffffff"
+                                     :strokeWidth="2"/>
+                      </div>
+                    </div>
                   </div>
-                  <div class="tab">
-                    <span>德语</span>
-                  </div>
-                </div>
-                <close @click="store.dictModalIsOpen = false" theme="outline" size="20" fill="#929596"
-                       :strokeWidth="2"/>
-              </header>
-              <div class="page-content">
-                <div class="dict-list-wrapper">
-                  <div class="tags">
-                    <div class="tag" :class="i === 5 &&'active'" v-for="i in 2">六级</div>
-                  </div>
-                  <div class="dict-list">
-                    <div class="dict-item"
-                         :class="currentSelectDict.name === i.name && 'active'" v-for="i in childrenEnglish"
-                         @click="selectDict(i)"
-                    >
-                      <div class="name">{{ i.name }}</div>
-                      <div class="desc">{{ i.description }}</div>
-                      <div class="num">{{ i.length }}词</div>
-                      <arrow-right v-if="currentSelectDict.name === i.name"
-                                   @click.stop="step = 1"
-                                   class="go" theme="outline" size="20" fill="#ffffff"
-                                   :strokeWidth="2"/>
+                  <div class="chapter-wrapper">
+                    <ChapterList
+                        class="chapter-list"
+                        :list="currentSelectDict.chapterList"
+                        v-model:active-index="currentSelectDict.chapterIndex"
+                    />
+                    <div class="footer">
+                      <div class="my-button">确定</div>
                     </div>
                   </div>
                 </div>
-                <div class="chapter-wrapper">
-                  <ChapterList
-                      class="chapter-list"
-                      :list="currentSelectDict.chapterList"
-                      v-model:active-index="currentSelectDict.chapterIndex"
-                  />
-                  <div class="footer">
-                    <div class="my-button">确定</div>
-                  </div>
-                </div>
               </div>
-            </div>
-            <div class="dict-detail-page">
-              <header>
-                <div class="left">
-                  <arrow-left
-                      @click="step = 0"
-                      class="go" theme="outline" size="20" fill="#ffffff"
-                      :strokeWidth="2"/>
-                  <div class="title">
-                    词典详情
+              <div class="dict-detail-page">
+                <header>
+                  <div class="left">
+                    <arrow-left
+                        @click="step = 0"
+                        class="go" theme="outline" size="20" fill="#ffffff"
+                        :strokeWidth="2"/>
+                    <div class="title">
+                      词典详情
+                    </div>
                   </div>
-                </div>
-                <close @click="store.dictModalIsOpen = false" theme="outline" size="20" fill="#929596"
-                       :strokeWidth="2"/>
-              </header>
-              <div class="page-content">
-                <div class="dict-info">
-                  <div class="dict-item">
-                    <div class="name">{{ currentSelectDict.name }}</div>
-                    <div class="desc">{{ currentSelectDict.description }}</div>
-                    <div class="num">{{ currentSelectDict.length }}词</div>
+                  <close @click="store.dictModalIsOpen = false" theme="outline" size="20" fill="#929596"
+                         :strokeWidth="2"/>
+                </header>
+                <div class="page-content">
+                  <div class="dict-info">
+                    <div class="dict-item">
+                      <div class="name">{{ currentSelectDict.name }}</div>
+                      <div class="desc">{{ currentSelectDict.description }}</div>
+                      <div class="num">{{ currentSelectDict.length }}词</div>
+                    </div>
                   </div>
-                </div>
-                <div class="chapter-wrapper">
-                  <ChapterList :list="currentSelectDict.chapterList"
-                               v-model:active-index="currentSelectDict.chapterIndex"
-                  />
-                </div>
-                <div class="other">
-                  <WordList class="word-list" :list="currentSelectChapter" :activeIndex="-1" :isActive="false"/>
-                  <div class="footer">
-                    <div class="my-button">返回</div>
-                    <div class="my-button">确定</div>
+                  <div class="chapter-wrapper">
+                    <ChapterList :list="currentSelectDict.chapterList"
+                                 v-model:active-index="currentSelectDict.chapterIndex"
+                    />
+                  </div>
+                  <div class="other">
+                    <WordList class="word-list" :list="currentSelectChapter" :activeIndex="-1" :isActive="false"/>
+                    <div class="footer">
+                      <div class="my-button">返回</div>
+                      <div class="my-button">确定</div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -136,7 +138,7 @@ async function selectDict(item: Dict) {
         </div>
       </div>
     </div>
-  </div>
+  </Teleport>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/components/WordList.vue b/src/components/WordList.vue
index 05f6918b..60fb6dc1 100644
--- a/src/components/WordList.vue
+++ b/src/components/WordList.vue
@@ -40,27 +40,32 @@ watch(() => props.list, () => {
 
 <template>
   <div class="list" ref="listRef">
-    <template v-for="(item,i) in list">
-      <div class="item" @click="$emit('change',i)" :class="activeIndex === i && 'active'">
-        <div class="left">
-          <div class="letter">{{ item.name }}</div>
-          <div class="info">
-            <div class="translate">{{ item.trans.join('；') }}</div>
-            <div class="phonetic">{{ item.usphone }}</div>
+    <TransitionGroup name="list">
+      <template v-for="(item,i) in list" :key="i">
+        <div class="item" @click="$emit('change',i)" :class="activeIndex === i && 'active'">
+          <div class="left">
+            <div class="letter">{{ item.name }}</div>
+            <div class="info">
+              <div class="translate">{{ item.trans.join('；') }}</div>
+              <div class="phonetic">{{ item.usphone }}</div>
+            </div>
+          </div>
+          <div class="right">
+            <div class="audio" @click="playAudio(item.name)">播放</div>
+            <div class="audio" @click="playAudio(item.name)">删除</div>
           </div>
         </div>
-        <div class="right">
-          <div class="audio" @click="playAudio(item.name)">播放</div>
-          <div class="audio" @click="playAudio(item.name)">删除</div>
-        </div>
-      </div>
-    </template>
+      </template>
+    </TransitionGroup>
   </div>
 </template>
 
+
 <style scoped lang="scss">
 @import "@/assets/css/colors";
 
+
+
 .list {
   display: flex;
   flex-direction: column;
@@ -68,7 +73,8 @@ watch(() => props.list, () => {
   width: 100%;
   height: 100%;
   padding: 0 $space;
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
   box-sizing: border-box;
 
   .item {