feat(assets): add scroll driven animations (#150)

Co-authored-by: webfansplz <[email protected]>

Author: jahnli

packages/client/components/AssetGridItem.vue

@@ -12,7 +12,7 @@ const path = computed(() => {
 </script>
 
 <template>
-  <button flex="~ col gap-1" hover="bg-active" items-center of-hidden rounded p2>
+  <button class="scroll-driven-animations" flex="~ col gap-1" hover="bg-active" items-center of-hidden rounded p2>
     <AssetPreview h-30 w-30 rounded border="~ base" :asset="asset" />
     <div w-full of-hidden truncate ws-nowrap text-center text-xs>
       {{ path }}

packages/client/components/AssetListItem.vue

@@ -17,7 +17,7 @@ const icon = computed(() => {
 </script>
 
 <template>
-  <button flex="~ gap-1" w-full items-center hover="bg-active" rounded px4 py2>
+  <button class="scroll-driven-animations" flex="~ gap-1" w-full items-center hover="bg-active" rounded px4 py2>
     <div :class="icon" />
     <div of-hidden truncate ws-nowrap text-center>
       {{ asset.path }}

packages/client/styles/main.css

@@ -186,3 +186,18 @@ textarea {
 .popup-dialog p {
   --uno: my-4;
 }
+
+@keyframes animate-in {
+  0% { opacity: 0; transform: translateY(100%); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+@keyframes animate-out {
+  0% { opacity: 1; transform: translateY(0); }
+  100% { opacity: 0; transform: translateY(-100%); }
+}
+
+.scroll-driven-animations {
+  animation: animate-in linear forwards, animate-out linear forwards;
+  animation-timeline: view();
+  animation-range: entry, exit;
+}