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.

Author: nexmoe

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;

nuxt.config.ts

@@ -62,6 +62,7 @@ export default defineNuxtConfig({
 		'@nuxtjs/web-vitals',
 		'nuxt-gtag',
 		'@nuxt/eslint',
+		'@vueuse/nuxt',
 	],
 
 	eslint: {

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",