Feat: animate

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",

src/components/cinema/MoviePush.vue

@@ -20,7 +20,7 @@ const Props = defineProps<{
 }>();
 
 // 新影片信息
-let newMovieInfo = ref<BaseMovieInfo>({
+const newMovieInfo = ref<BaseMovieInfo>({
   url: "",
   name: "",
   type: "",
@@ -331,24 +331,26 @@ 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'"
           class="l-input-violet w-full"
           v-if="!(newMovieInfo.live && newMovieInfo.rtmpSource)"
           v-model="newMovieInfo.url"
         />
-      </Transition>
-      <Transition name="fade">
         <input
           type="text"
           placeholder="影片名称"
           class="l-input-slate mt-2 w-full"
           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">

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";
 

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