diff --git a/src/views/Demo.vue b/src/views/Demo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8078d77185a6bdfa186b6d47e517f2a7d0fadb50
--- /dev/null
+++ b/src/views/Demo.vue
@@ -0,0 +1,3 @@
+<template>
+    <a-input-search placeholder="input search text" style="width: 200px" />
+</template>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4fcb95bc7aead478a5f0b454190d091ec6ed743f..6a8805afa8088208f7e22a327a3c2bc90396cb56 100644
--- a/src/views/HomeView.vue
+++ b/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>