feat: 添加删除动画

Author: Plumbiu

backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json

@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2023-02-07T11:00:32.258Z"
+    "x-generation-date": "2023-02-07T14:16:36.493Z"
   },
   "x-strapi-config": {
     "path": "/documentation",

frontend/components/ArticlesList/Item/index.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
+import { useAutoAnimate } from '@formkit/auto-animate/vue'
 import type { Ref } from 'vue'
 import type { IArticleItem } from '~~/types/IArticleItem'
 const artlist = inject<Ref<IArticleItem[]>>('artlist')
+const [parent] = useAutoAnimate()
 const hideHandler = (id: string) => {
   artlist && (artlist.value = artlist.value.filter(item => item.id !== id))
 }
 </script>
 
 <template>
-  <ClientOnly>
+  <ul ref="parent">
+    <ArticlesListItemAds />
     <li v-for="art in artlist" :key="art.id" class="list_container">
       <ArticlesListUiLink :to="`/article/${art.id}`">
         <div class="left">
@@ -24,7 +27,7 @@ const hideHandler = (id: string) => {
       </ArticlesListUiLink>
       <div class="icon" @click="hideHandler(art.id)" />
     </li>
-  </ClientOnly>
+  </ul>
 </template>
 
 <style scoped>

frontend/components/ArticlesList/index.vue

@@ -32,9 +32,8 @@ onUnmounted(() => {
   <div class="bg-jj-article">
     <ArticlesListNavigation />
     <ArticlesListUiSkeleton v-if="isLoading || !artlist.length" />
-    <ul v-else>
-      <ArticlesListItemAds />
+    <ClientOnly v-else>
       <ArticlesListItem />
-    </ul>
+    </ClientOnly>
   </div>
 </template>

frontend/package.json

@@ -41,6 +41,7 @@
     "@types/marked": "^4.0.8",
     "@unocss/nuxt": "^0.46.5",
     "@vueuse/nuxt": "^9.5.0",
+    "@formkit/auto-animate": "^1.0.0-beta.6",
     "eslint": "^8.27.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",

yarn.lock

@@ -1970,6 +1970,11 @@
     intl-messageformat "9.13.0"
     tslib "^2.1.0"
 
+"@formkit/auto-animate@^1.0.0-beta.6":
+  version "1.0.0-beta.6"
+  resolved "https://registry.npmmirror.com/@formkit/auto-animate/-/auto-animate-1.0.0-beta.6.tgz#ed7f8bc47d774a7764756646e9e3432e8be51cb3"
+  integrity sha512-PVDhLAlr+B4Xb7e+1wozBUWmXa6BFU8xUPR/W/E+TsQhPS1qkAdAsJ25keEnFrcePSnXHrOsh3tiFbEToOzV9w==
+
 "@graphql-tools/[email protected]":
   version "8.3.1"
   resolved "https://registry.npmjs.org/@graphql-tools/merge/-/merge-8.3.1.tgz"