Feat: add animation

src/assets/animation.less

@@ -0,0 +1,9 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

src/components/MoviePush.vue

@@ -196,13 +196,16 @@ onMounted(() => {});
       </select>
     </div>
     <div class="card-body flex justify-around flex-wrap">
-      <input
-        type="text"
-        placeholder="影片Url"
-        class="l-input-violet mb-1.5 w-full"
-        v-if="!(newMovieInfo.live && newMovieInfo.rtmpSource)"
-        v-model="newMovieInfo.url"
-      />
+      <Transition name="fade">
+        <input
+          type="text"
+          placeholder="影片Url"
+          class="l-input-violet mb-1.5 w-full"
+          v-if="!(newMovieInfo.live && newMovieInfo.rtmpSource)"
+          v-model="newMovieInfo.url"
+        />
+      </Transition>
+
       <input
         type="text"
         placeholder="影片名称"
@@ -230,14 +233,11 @@ onMounted(() => {});
               </option>
             </select>
           </div>
-          <div class="more-option-list" v-if="!newMovieInfo.rtmpSource">
-            <input
-              type="text"
-              placeholder="自定义 header"
-              class="l-input m-0 mb-1.5 w-full text-base"
-              v-model="stringHeader"
-            />
-          </div>
+          <Transition name="fade">
+            <div class="more-option-list cursor-pointer" v-if="!newMovieInfo.rtmpSource">
+              <span class="text-sm min-w-fit"> 自定义 header </span>
+            </div>
+          </Transition>
         </el-collapse-item>
       </el-collapse>
     </div>

src/main.ts

@@ -1,28 +1,29 @@
-import './assets/reset.css'
-import './assets/global.less'
-import 'element-plus/dist/index.css'
-import 'element-plus/theme-chalk/dark/css-vars.css'
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+import "./assets/reset.css";
+import "./assets/global.less";
+import "./assets/animation.less";
+import "element-plus/dist/index.css";
+import "element-plus/theme-chalk/dark/css-vars.css";
+import { createApp } from "vue";
+import { createPinia } from "pinia";
 
-import App from './App.vue'
-import router from './router'
+import App from "./App.vue";
+import router from "./router";
 
-import SunIcon from './components/icons/Sun.vue'
-import MoonIcon from './components/icons/Moon.vue'
-import PlayIcon from './components/icons/Play.vue'
-import EditIcon from './components/icons/Edit.vue'
-import TrashIcon from './components/icons/Trash.vue'
+import SunIcon from "./components/icons/Sun.vue";
+import MoonIcon from "./components/icons/Moon.vue";
+import PlayIcon from "./components/icons/Play.vue";
+import EditIcon from "./components/icons/Edit.vue";
+import TrashIcon from "./components/icons/Trash.vue";
 
-const app = createApp(App)
+const app = createApp(App);
 app
-  .component('SunIcon', SunIcon)
-  .component('MoonIcon', MoonIcon)
-  .component('PlayIcon', PlayIcon)
-  .component('EditIcon', EditIcon)
-  .component('TrashIcon', TrashIcon)
+  .component("SunIcon", SunIcon)
+  .component("MoonIcon", MoonIcon)
+  .component("PlayIcon", PlayIcon)
+  .component("EditIcon", EditIcon)
+  .component("TrashIcon", TrashIcon);
 
-app.use(createPinia())
-app.use(router)
+app.use(createPinia());
+app.use(router);
 
-app.mount('#app')
+app.mount("#app");