From 90f8a9fea5df25f26e1ec0855e8481b762593f2b Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Thu, 14 Dec 2023 13:24:32 +0800
Subject: [PATCH] Feat: animate

---
 package-lock.json                   |  6 ++++++
 package.json                        |  1 +
 src/components/cinema/MoviePush.vue | 12 +++++++-----
 src/main.ts                         |  1 +
 src/views/admin/index.vue           |  4 ++--
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e1ba5ac..0a7df4c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@vueuse/core": "^10.4.1",
         "@vueuse/router": "^10.5.0",
+        "animate.css": "^4.1.1",
         "artplayer": "^5.0.9",
         "artplayer-plugin-danmuku": "^5.0.1",
         "artplayer-plugin-dash-quality": "^2.0.0",
@@ -1763,6 +1764,11 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
diff --git a/package.json b/package.json
index d97320d..8777ee5 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@vueuse/core": "^10.4.1",
     "@vueuse/router": "^10.5.0",
+    "animate.css": "^4.1.1",
     "artplayer": "^5.0.9",
     "artplayer-plugin-danmuku": "^5.0.1",
     "artplayer-plugin-dash-quality": "^2.0.0",
diff --git a/src/components/cinema/MoviePush.vue b/src/components/cinema/MoviePush.vue
index b28e569..99ef0d0 100644
--- a/src/components/cinema/MoviePush.vue
+++ b/src/components/cinema/MoviePush.vue
@@ -20,7 +20,7 @@ const Props = defineProps<{
 }>();
 
 // 新影片信息
-let newMovieInfo = ref<BaseMovieInfo>({
+const newMovieInfo = ref<BaseMovieInfo>({
   url: "",
   name: "",
   type: "",
@@ -331,7 +331,11 @@ const getBiliBiliVendors = async () => {
       </select>
     </div>
     <div class="card-body flex justify-around flex-wrap">
-      <Transition name="fade">
+      <TransitionGroup
+        enter-active-class="animate__animated animate__zoomIn"
+        leave-active-class="animate__animated animate__zoomOut"
+        mode="out-in"
+      >
         <input
           type="text"
           :placeholder="selectedMovieType === pushType.BILIBILI ? '视频Url或bv号' : '影片Url'"
@@ -339,8 +343,6 @@ const getBiliBiliVendors = async () => {
           v-if="!(newMovieInfo.live && newMovieInfo.rtmpSource)"
           v-model="newMovieInfo.url"
         />
-      </Transition>
-      <Transition name="fade">
         <input
           type="text"
           placeholder="影片名称"
@@ -348,7 +350,7 @@ const getBiliBiliVendors = async () => {
           v-if="selectedMovieType !== pushType.BILIBILI"
           v-model="newMovieInfo.name"
         />
-      </Transition>
+      </TransitionGroup>
     </div>
     <div class="mx-5" v-if="!newMovieInfo.vendorInfo?.vendor">
       <el-collapse @change="" class="bg-transparent" style="background: #aaa0 !important">
diff --git a/src/main.ts b/src/main.ts
index bd0af8f..5d8b34b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import "./assets/global.less";
 import "./assets/animation.less";
 import "element-plus/dist/index.css";
 import "element-plus/theme-chalk/dark/css-vars.css";
+import "animate.css";
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 
diff --git a/src/views/admin/index.vue b/src/views/admin/index.vue
index 5c4be4c..7be7995 100644
--- a/src/views/admin/index.vue
+++ b/src/views/admin/index.vue
@@ -106,7 +106,7 @@ onMounted(() => {
 <template>
   <div class="menu-toggle" @click="menuToggle"></div>
   <div class="container mx-auto flex gap-5">
-    <transition name="slide-to-left">
+    <Transition name="slide-to-left">
       <div class="w-96 relative menu-drawer" v-show="menu">
         <div class="card" style="height: 85vh; overflow-y: auto">
           <div class="card-body py-5">
@@ -123,7 +123,7 @@ onMounted(() => {
           </div>
         </div>
       </div>
-    </transition>
+    </Transition>
 
     <div class="w-full right-content">
       <component