From 1e86e075385fe5a09d7b51c6ec0af262ba87f7a9 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Sat, 10 Dec 2022 19:36:28 +0100
Subject: [PATCH] fancy animations

---
 src/lib/components/anilistItems.svelte  | 26 +++++++++++---------
 src/lib/components/item.svelte          | 32 ++++++++++++++++++-------
 src/lib/components/mangadexItems.svelte |  4 +++-
 src/routes/[manga]/relatedManga.svelte  |  4 +++-
 4 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/anilistItems.svelte b/src/lib/components/anilistItems.svelte
index 103fbab..fcc4937 100644
--- a/src/lib/components/anilistItems.svelte
+++ b/src/lib/components/anilistItems.svelte
@@ -1,5 +1,7 @@
 <script>
     import { goto } from "$app/navigation";
+    import { flip } from "svelte/animate";
+    import { blur } from "svelte/transition";
     import request from "../util/request";
     import Item from "./item.svelte";
     import { showType } from "./showTypeChooser.svelte";
@@ -62,17 +64,19 @@
 
 <div class="items" class:list={$showType == "list"}>
     {#each entries.sort((a, b) => a.priority - b.priority) as entry (entry.media.id)}
-        <Item
-            r18={entry.media.isAdult}
-            cover={entry.media.coverImage.large}
-            title={entry.media.title.userPreferred}
-            lastChapter={entry.media.chapters}
-            chapterProgress={entry.progress}
-            score={entry.score || "?"}
-            description={entry.notes}
-            coverColor={entry.media.coverImage.color == "null" ? null : entry.media.coverImage.color}
-            on:click={() => find(entry)}
-            />
+        <div animate:flip transition:blur>
+            <Item
+                r18={entry.media.isAdult}
+                cover={entry.media.coverImage.large}
+                title={entry.media.title.userPreferred}
+                lastChapter={entry.media.chapters}
+                chapterProgress={entry.progress}
+                score={entry.score || "?"}
+                description={entry.notes}
+                coverColor={entry.media.coverImage.color == "null" ? null : entry.media.coverImage.color}
+                on:click={() => find(entry)}
+                />
+        </div>
     {/each}
 </div>
 
diff --git a/src/lib/components/item.svelte b/src/lib/components/item.svelte
index 25698b5..ad743d4 100644
--- a/src/lib/components/item.svelte
+++ b/src/lib/components/item.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import SvelteMarkdown from "svelte-markdown";
+    import { flip } from "svelte/animate";
+    import { blur, crossfade } from "svelte/transition";
     import { showNsfw } from "./showNsfwChooser.svelte";
     import { showType } from "./showTypeChooser.svelte";
 
@@ -16,6 +18,10 @@
     export var coverHeight: number | null = null;
 
     export var coverColor: string | null = null;
+
+    const [send, receive] = crossfade({
+        fallback: blur
+    });
 </script>
 
 <div on:click class="item" class:grid={$showType == "grid"} class:comfortable={$showType == "comfortable"} class:coverOnly={$showType == "cover-only"} class:list={$showType == "list"}>
@@ -23,9 +29,11 @@
         {#if cover}
             <div class="cover-container" width={coverWidth} height={coverHeight}>
                 <img class="cover" style="{coverColor ? "--box-shadow-color: " + coverColor : ""}" draggable="false" src="{cover}" alt="{title}" {title} width={coverWidth} height={coverHeight}>
-                <div class="over" class:hidden={$showType !== "grid"}>
-                    {title}
-                </div>
+                {#if $showType == "grid"}
+                    <div class="over" in:send={{ key: title }} out:receive={{ key:title }}>
+                        {title}
+                    </div>
+                {/if}
             </div>
         {:else}
             Broken art
@@ -46,8 +54,12 @@
             {/if}
         </div>
     </div>
-    <div class="comfortable-div" class:hidden={$showType !== "comfortable"}>
-        {title}
+    <div class="comfortable-div" class:hiding={$showType !== "comfortable"}>
+        {#if $showType == "comfortable"}
+            <span in:send={{ key: title }} out:receive={{ key: title }}>
+                {title}
+            </span>
+        {/if}
     </div>
 </div>
 
@@ -125,11 +137,13 @@
         text-overflow: ellipsis;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
-        transition: max-height .3s;
+        transition: max-height .3s ease;
     }
-    .hidden {
-        opacity: 0;
-        user-select: none;
+    .comfortable-div span {
+        display: block;
+        width: 100%;
+    }
+    .comfortable-div.hiding {
         max-height: 0;
     }
 	.item img {
diff --git a/src/lib/components/mangadexItems.svelte b/src/lib/components/mangadexItems.svelte
index 8bc0236..6e82a0f 100644
--- a/src/lib/components/mangadexItems.svelte
+++ b/src/lib/components/mangadexItems.svelte
@@ -1,5 +1,7 @@
 <script>
     import { imageproxy } from "$lib/util/request";
+    import { flip } from "svelte/animate";
+    import { blur } from "svelte/transition";
     import Item from "./item.svelte";
     import { showType } from "./showTypeChooser.svelte";
 
@@ -9,7 +11,7 @@
 
 <div class="items" class:list={$showType == "list"}>
     {#each entries as entry (entry.id)}
-        <a href="/{entry.id}">
+        <a href="/{entry.id}" animate:flip transition:blur>
             <Item
                 r18={!["safe", "suggestive"].includes(entry.attributes.contentRating)}
                 cover={imageproxy + entry.relationships.find(t => t.type === "cover_art") ? `https://uploads.mangadex.org/covers/${entry.id}/${entry.relationships.find(t => t.type === "cover_art").attributes.fileName}.512.jpg` : null}
diff --git a/src/routes/[manga]/relatedManga.svelte b/src/routes/[manga]/relatedManga.svelte
index e098d7c..94f9798 100644
--- a/src/routes/[manga]/relatedManga.svelte
+++ b/src/routes/[manga]/relatedManga.svelte
@@ -4,6 +4,8 @@
     import ShowTypeChooser, { showType } from "$lib/components/showTypeChooser.svelte";
     import request, { imageproxy } from "$lib/util/request";
     import { createEventDispatcher, tick } from "svelte";
+    import { flip } from "svelte/animate";
+    import { blur } from "svelte/transition";
 
     const relatedMangaMap = {
         main_story: "Main story",
@@ -100,7 +102,7 @@
 
 <div class="grid" class:list={$showType == "list"}>
     {#each mangaRelations.filter(t => $showNsfw !== "hide" || ["safe", "suggestive"].includes(t.attributes.contentRating)) as manga (manga.id)}
-        <a href="/{manga.id}" class="manga">
+        <a href="/{manga.id}" class="manga" animate:flip={{ duration: d=>Math.sqrt(d)*10 }} transition:blur>
             {#await relations then relations}
                 <Item
                     r18={!['safe', 'suggestive'].includes(manga.attributes.contentRating)}