From e25760ca6de83719d3f39ea40e428b134b476ae6 Mon Sep 17 00:00:00 2001
From: Nexmoe <16796652+nexmoe@users.noreply.github.com>
Date: Sun, 12 May 2024 18:57:21 +0800
Subject: [PATCH] feat(Poe): add animation when component is visible (#132)

feat(deps): install @vueuse/nuxt package

feat(nuxt): add @vueuse/nuxt module to nuxt config

chore(deps): update pnpm.lock file with @vueuse/nuxt package

The changes made in this commit are:

1. Added a new `@vueuse/nuxt` package to the project dependencies.
2. Installed the `@vueuse/nuxt` module in the `nuxt.config.ts` file.
3. Updated the `pnpm-lock.yaml` file with the new `@vueuse/nuxt` package and its dependencies.
4. In the `components/custom/Poe.vue` file, added a new ref `elePoe` to the root element and used the `useElementVisibility` hook from `@vueuse/core` to detect when the component becomes visible.
5. Added a new class `animate` that is applied to the component when it becomes visible, which triggers the animation on the `.major` and `.poe div` elements.
6. Paused the animation initially, and started it when the component becomes visible.

These changes were made to improve the user experience by adding an animation effect to the Poe component when it comes into view, making the content more engaging and visually appealing.
---
 components/custom/Poe.vue | 21 ++++++++++++++++++---
 nuxt.config.ts            |  1 +
 package.json              |  1 +
 pnpm-lock.yaml            |  3 +++
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/components/custom/Poe.vue b/components/custom/Poe.vue
index 58d7f69..3ef833f 100644
--- a/components/custom/Poe.vue
+++ b/components/custom/Poe.vue
@@ -1,10 +1,19 @@
 <script setup lang="ts">
+import { useElementVisibility } from '@vueuse/core'
 
+const elePoe = ref<HTMLElement | null>(null)
+const targetIsVisible = useElementVisibility(elePoe)
 </script>
 
 <template>
-	<div class="body pt-12 h-screen pb-12">
-		<div class="relative flex flex-row items-center justify-center gap-2 h-full">
+	<div
+		ref="elePoe"
+		class="body pt-12 h-screen pb-12"
+	>
+		<div
+			:class="{ animate: targetIsVisible }"
+			class="relative flex flex-row items-center justify-center gap-2 h-full"
+		>
 			<div class="major text-7xl text-center font-bold tracking-tight text-black">
 				谁怕？一蓑烟雨任平生
 			</div>
@@ -32,6 +41,7 @@
 .major {
 	@apply opacity-0;
 	animation: fadeIn 1.5s ease-in-out 3.5s forwards;
+	animation-play-state: paused !important;
 }
 
 .poe {
@@ -40,10 +50,15 @@
 
 .poe div {
 	@apply block m-3 z-10 opacity-20 hover:opacity-100 duration-200;
-	animation-fill-mode: forwards;
+	animation-play-state: paused !important;
 	white-space: nowrap;
 }
 
+.animate .major,
+.animate .poe div {
+	animation-play-state: running !important;
+}
+
 @keyframes fadeIn {
 	0% {
 		opacity: 0;
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 365e2f1..864b120 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -62,6 +62,7 @@ export default defineNuxtConfig({
 		'@nuxtjs/web-vitals',
 		'nuxt-gtag',
 		'@nuxt/eslint',
+		'@vueuse/nuxt',
 	],
 
 	eslint: {
diff --git a/package.json b/package.json
index b61a8ec..8f84067 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
 		"@trpc/client": "^10.45.2",
 		"@trpc/server": "^10.45.2",
 		"@vitest/coverage-v8": "^1.4.0",
+		"@vueuse/nuxt": "^10.9.0",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
 		"consola": "^3.2.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e03c900..8f1ca8d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@vitest/coverage-v8':
         specifier: ^1.4.0
         version: 1.5.2(vitest@1.5.2(@types/node@20.12.7)(@vitest/ui@1.5.2)(sass@1.75.0)(terser@5.30.4))
+      '@vueuse/nuxt':
+        specifier: ^10.9.0
+        version: 10.9.0(nuxt@3.11.2(@parcel/watcher@2.4.1)(@types/node@20.12.7)(@unocss/reset@0.59.4)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.16.4))(vue@3.4.25(typescript@5.4.5)))(fuse.js@7.0.0)(ioredis@5.4.1)(meow@12.1.1)(optionator@0.9.3)(rollup@4.16.4)(sass@1.75.0)(terser@5.30.4)(typescript@5.4.5)(unocss@0.59.4(@unocss/webpack@0.59.4(rollup@4.16.4)(webpack@5.91.0))(postcss@8.4.38)(rollup@4.16.4)(vite@5.2.10(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4)))(vite@5.2.10(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))(vue-tsc@1.8.27(typescript@5.4.5))(xml2js@0.6.2))(rollup@4.16.4)(vue@3.4.25(typescript@5.4.5))
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0