chore: doc update

unovue · Dec 8, 2024 · a55b9d4 · a55b9d4
1 parent 2563d48
commit a55b9d4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/docs/src/lib/registry/new-york/example/MotionLayoutShared.vue b/docs/src/lib/registry/new-york/example/MotionLayoutShared.vue
@@ -19,7 +19,7 @@ const selectedTab = ref(tabs[0])
 
 <template>
   <div class="flex justify-center items-center ">
-    <div class="window">
+    <div class="window bg-background">
       <nav>
         <ul>
           <li
@@ -60,19 +60,16 @@ const selectedTab = ref(tabs[0])
   max-width: 80vw;
   height: 360px;
   border-radius: 10px;
-  background: white;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
 nav {
-  background: #fdfdfd;
   padding: 5px 5px 0;
   border-radius: 10px;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  border-bottom: 1px solid #eeeeee;
   height: 44px;
 }
 .tabs {
@@ -115,11 +112,10 @@ li {
   width: 100%;
   padding: 10px 15px;
   position: relative;
-  background: white;
   cursor: pointer;
   height: 24px;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   flex: 1;
   min-width: 0;

diff --git a/packages/motion/src/constants/index.ts b/packages/motion/src/constants/index.ts
@@ -1,7 +1,7 @@
 const components = {
   motion: [
     'Motion',
-    'MotionPresence',
+    'AnimatePresence',
     'LayoutGroup',
   ],
 }

diff --git a/playground/nuxt/pages/index.vue b/playground/nuxt/pages/index.vue
@@ -1,15 +1,33 @@
 <script setup lang="ts">
+import { AnimatePresence, Motion } from 'motion-v'
+
 const routes = [
   { path: '/layout', name: 'Basic Layout Animation' },
   { path: '/flex-layout', name: 'Flex Layout Switch Animation' },
   { path: '/scale-correction-z', name: 'Scale Correction Animation' },
   { path: '/layout-id-tabs', name: 'Layout ID Tabs Animation' },
   { path: '/layout-group', name: 'Layout Group Animation' },
 ]
+const isShow = ref(true)
+function handleClick() {
+  isShow.value = !isShow.value
+}
 </script>
 
 <template>
   <div class="flex flex-col p-8 h-screen bg-gradient-to-tr from-[#7b2ff7] to-[#f107a3]">
+    {{ isShow }}
+    <AnimatePresence>
+      <Motion
+        v-if="isShow"
+        :exit="{
+          opacity: 0,
+        }"
+        layout
+        class="bg-white w-20 h-20 rounded"
+        @click="handleClick"
+      />
+    </AnimatePresence>
     <div class="max-w-md mx-auto w-full space-y-4 mt-20">
       <h1 class="text-2xl font-bold text-white mb-8">
         Motion-V 动画演示