Fri Aug 4 12:02:00 CST 2023 inscode

src/views/Demo.vue

+<template>
+    <a-input-search placeholder="input search text" style="width: 200px" />
+</template>
\ No newline at end of file

src/views/HomeView.vue

@@ -5,6 +5,9 @@
   import { mockData } from "@/utils/mockData.js";
   import { useArticleStore } from "@/stores/article";
   import { getStorage, setStorage } from "@/utils/storage";
+  import Demo from "./Demo.vue";
+  import { theme } from "ant-design-vue";
+  const isShow = ref(true)
   const activeKey = ref("1");
   const router = useRouter();
   const store = useArticleStore();
@@ -38,6 +41,14 @@
 
 <template>
   <Nav></Nav>
+  <div>
+    <a-config-provider :theme="{algorithm: theme.darkAlgorithm}">
+    <a-button @click="isShow = !isShow">switch</a-button>
+    <transition name="testfate">
+      <Demo v-if="isShow" />
+    </transition>
+  </a-config-provider>
+  </div>
   <main>
     <a-row justify="center">
       <a-col :span="20">
@@ -105,4 +116,11 @@
     top: 24px;
     right: 24px;
   }
+  .testfate-leave-active {
+  transition: all 1s linear;
+  transition-delay: 1s;
+}
+.testfate-leave-to {
+  opacity: 0;
+}
 </style>