slick animations!!

kent-3 · Jan 21, 2025 · bc59ae3 · bc59ae3
1 parent d34e1e7
commit bc59ae3
Show file tree

Hide file tree

Showing 8 changed files with 357 additions and 82 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -8,9 +8,9 @@
 
     <!-- <link data-trunk rel="copy-file" href="/manifest.json" /> -->
 
-<script type="module" nonce="2W6er7RsOHHDY3KfD5DOcA==">
-import init, * as bindings from 'https://kent-3.github.io/liquidity-book-leptos/trader-leptos-aecc120261abd10a.js';
-const wasm = await init({ module_or_path: 'https://kent-3.github.io/liquidity-book-leptos/trader-leptos-aecc120261abd10a_bg.wasm' });
+<script type="module" nonce="PdwI38m9+QIzTYXRchtnBw==">
+import init, * as bindings from 'https://kent-3.github.io/liquidity-book-leptos/trader-leptos-31b490e956c80a34.js';
+const wasm = await init({ module_or_path: 'https://kent-3.github.io/liquidity-book-leptos/trader-leptos-31b490e956c80a34_bg.wasm' });
 
 
 window.wasmBindings = bindings;
@@ -20,7 +20,7 @@
 
 </script>
     <link rel="icon" href="https://kent-3.github.io/liquidity-book-leptos/favicon-e9cbd8f50cc65bf2.ico" integrity="sha384&#x2D;YobgLXwtz0GhXVUTHml49p32guapVFlEG8UpQdDVN3kekOqkQi&#x2B;qSXEpwp&#x2B;yM4BW"/>
-    <link rel="stylesheet" href="https://kent-3.github.io/liquidity-book-leptos/input-acb7644e2efec906.css" integrity="sha384&#x2D;ValJqHFGEpTSvsD&#x2B;eNdJaNpvKJ2A1JXpokWtn3QIifGkdzca&#x2F;tiljjCjTQiYrgmX"/>
+    <link rel="stylesheet" href="https://kent-3.github.io/liquidity-book-leptos/input-d39946d61cec6ab2.css" integrity="sha384&#x2D;8Nw&#x2F;iLBnY26xai7z0mGY6ZaBJjsloLAsqURZHxpnEZR5geeF&#x2F;&#x2B;6&#x2F;C7GT3idhgb06"/>
 
     <!-- <link rel="manifest" href="/trader-crow-leptos/manifest.json" /> -->
 
@@ -47,7 +47,7 @@
         checkResourcesLoaded();
       });
     </script>
-  <link rel="modulepreload" href="https://kent-3.github.io/liquidity-book-leptos/trader-leptos-aecc120261abd10a.js" crossorigin=anonymous integrity="sha384-z3YYTPrTRuz3+sJqi7M3oLAI1hF8j3YFxN+wTPl0++7F748U+chdjvt9o0oiVGUi"><link rel="preload" href="https://kent-3.github.io/liquidity-book-leptos/trader-leptos-aecc120261abd10a_bg.wasm" crossorigin=anonymous integrity="sha384-tkRFVKnXD0HtgFGmZCnckhLCRheY6E/rR4xZNh3h/OJ0tHEq8kQrSQ7zwNPbjsBe" as="fetch" type="application/wasm"></head>
+  <link rel="modulepreload" href="https://kent-3.github.io/liquidity-book-leptos/trader-leptos-31b490e956c80a34.js" crossorigin=anonymous integrity="sha384-yvvAQa/zNe2Dyxfier9O3GWuTRhSvxorSIfXSF001qlUzLmkm2iEiynIJsZF+N65"><link rel="preload" href="https://kent-3.github.io/liquidity-book-leptos/trader-leptos-31b490e956c80a34_bg.wasm" crossorigin=anonymous integrity="sha384-jxuiBC8bcSI8eHEYFwYFDv4TrkRPEULTS52piNuqssEBgWBAwD5mMHMxIqHXDGnx" as="fetch" type="application/wasm"></head>
 
   <style>
     .spinner {

diff --git a/dist/input-acb7644e2efec906.css → dist/input-d39946d61cec6ab2.css b/dist/input-acb7644e2efec906.css → dist/input-d39946d61cec6ab2.css
@@ -1628,6 +1628,8 @@ ul {
   }
 }
 
+/* View Transitions CSS */
+
 .router-outlet-0 main {
   view-transition-name: main;
 }
@@ -1636,42 +1638,199 @@ ul {
   view-transition-name: main-back;
 }
 
-.router-outlet-1 .contact-list {
-  view-transition-name: contact;
+.router-outlet-1 .pools-group {
+  view-transition-name: outlet-1;
+}
+
+.router-outlet-2 .pool-tab-group {
+  view-transition-name: outlet-2;
+}
+
+.router-outlet-3 .liquidity-group {
+  view-transition-name: outlet-3;
+}
+
+::view-transition-old(outlet-1) {
+  animation:
+    90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(outlet-1) {
+  animation:
+    210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(outlet-2) {
+  animation:
+    90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(outlet-2) {
+  animation:
+    210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+/* ::view-transition-old(main) { */
+
+/*   animation: 200ms slideOut cubic-bezier(0.2, 0, 0, 1); */
+
+/*   animation-fill-mode: forwards; */
+
+/* } */
+
+/**/
+
+/* ::view-transition-new(main) { */
+
+/*   animation: 450ms slideIn cubic-bezier(0.2, 0, 0, 1); */
+
+/*   animation-fill-mode: forwards; */
+
+/* } */
+
+/**/
+
+/* ::view-transition-old(main-back) { */
+
+/*   color: red; */
+
+/*   animation: 200ms slideOutBack cubic-bezier(0.2, 0, 0, 1); */
+
+/*   animation-fill-mode: forwards; */
+
+/* } */
+
+/**/
+
+/* ::view-transition-new(main-back) { */
+
+/*   color: blue; */
+
+/*   animation: 450ms slideInBack cubic-bezier(0.2, 0, 0, 1); */
+
+/*   animation-fill-mode: forwards; */
+
+/* } */
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  ::view-transition-old(contact) {
-    animation: 150ms fadeOut cubic-bezier(0.3, 0.1, 1, 1);
-    /* Hold final state of animation */
-    animation-fill-mode: forwards;
+@keyframes fade-out {
+  to {
+    opacity: 0;
   }
+}
 
-  ::view-transition-new(contact) {
-    animation: 300ms fadeIn cubic-bezier(0.2, 0, 0, 1);
-    animation-fill-mode: forwards;
+@keyframes slide-from-right {
+  from {
+    transform: translateX(30px);
   }
+}
 
-  ::view-transition-old(main) {
-    animation: 200ms slideOut cubic-bezier(0.2, 0, 0, 1);
-    animation-fill-mode: forwards;
+@keyframes slide-to-left {
+  to {
+    transform: translateX(-30px);
   }
+}
 
-  ::view-transition-new(main) {
-    animation: 450ms slideIn cubic-bezier(0.2, 0, 0, 1);
-    animation-fill-mode: forwards;
+@keyframes slide-to-right {
+  to {
+    transform: translateX(30px);
   }
+}
 
-  ::view-transition-old(main-back) {
-    color: red;
-    animation: 200ms slideOutBack cubic-bezier(0.2, 0, 0, 1);
-    animation-fill-mode: forwards;
+@keyframes slide-from-left {
+  from {
+    transform: translateX(-30px);
   }
+}
+
+::view-transition-old(main) {
+  animation:
+    90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(main) {
+  animation:
+    210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(main-back) {
+  animation:
+    90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(main-back) {
+  animation:
+    210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+::view-transition-old(outlet-3) {
+  animation:
+    90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(outlet-3) {
+  animation:
+    210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+/* ::view-transition-old(main), */
+
+/* ::view-transition-new(main) { */
+
+/*   animation-duration: 1s; */
+
+/* } */
+
+/**/
+
+/* ::view-transition-old(outlet-1), */
+
+/* ::view-transition-new(outlet-1) { */
+
+/*   animation-duration: 0.5s; */
+
+/* } */
+
+/**/
+
+/* ::view-transition-old(outlet-2), */
+
+/* ::view-transition-new(outlet-2) { */
+
+/*   animation-duration: 0.25s; */
+
+/* } */
+
+/**/
+
+/* ::view-transition-old(outlet-3), */
+
+/* ::view-transition-new(outlet-3) { */
+
+/*   animation-duration: 0.15s; */
+
+/* } */
 
-  ::view-transition-new(main-back) {
-    color: blue;
-    animation: 450ms slideInBack cubic-bezier(0.2, 0, 0, 1);
-    animation-fill-mode: forwards;
+@media (prefers-reduced-motion) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
   }
 }
 

diff --git a/dist/trader-leptos-aecc120261abd10a.js → dist/trader-leptos-31b490e956c80a34.js b/dist/trader-leptos-aecc120261abd10a.js → dist/trader-leptos-31b490e956c80a34.js
@@ -264,11 +264,11 @@ function __wbg_adapter_53(arg0, arg1, arg2) {
     wasm.__wbindgen_export_6(arg0, arg1, addHeapObject(arg2));
 }
 
-function __wbg_adapter_60(arg0, arg1) {
+function __wbg_adapter_58(arg0, arg1) {
     wasm.__wbindgen_export_7(arg0, arg1);
 }
 
-function __wbg_adapter_157(arg0, arg1, arg2, arg3) {
+function __wbg_adapter_155(arg0, arg1, arg2, arg3) {
     wasm.__wbindgen_export_8(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
 }
 
@@ -949,7 +949,7 @@ function __wbg_get_imports() {
                 const a = state0.a;
                 state0.a = 0;
                 try {
-                    return __wbg_adapter_157(a, state0.b, arg0, arg1);
+                    return __wbg_adapter_155(a, state0.b, arg0, arg1);
                 } finally {
                     state0.a = a;
                 }
@@ -1375,36 +1375,32 @@ function __wbg_get_imports() {
         const ret = false;
         return ret;
     };
-    imports.wbg.__wbindgen_closure_wrapper3293 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 205, __wbg_adapter_50);
+    imports.wbg.__wbindgen_closure_wrapper3366 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 218, __wbg_adapter_53);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper3300 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 207, __wbg_adapter_50);
+    imports.wbg.__wbindgen_closure_wrapper4272 = function(arg0, arg1, arg2) {
+        const ret = makeClosure(arg0, arg1, 268, __wbg_adapter_58);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper4197 = function(arg0, arg1, arg2) {
-        const ret = makeClosure(arg0, arg1, 254, __wbg_adapter_60);
+    imports.wbg.__wbindgen_closure_wrapper4283 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 279, __wbg_adapter_53);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper4208 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 266, __wbg_adapter_53);
+    imports.wbg.__wbindgen_closure_wrapper4556 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 279, __wbg_adapter_53);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper4483 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 266, __wbg_adapter_53);
+    imports.wbg.__wbindgen_closure_wrapper4560 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 279, __wbg_adapter_53);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper4489 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 266, __wbg_adapter_53);
+    imports.wbg.__wbindgen_closure_wrapper599 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 221, __wbg_adapter_50);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper483 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 207, __wbg_adapter_50);
-        return addHeapObject(ret);
-    };
-    imports.wbg.__wbindgen_closure_wrapper488 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 207, __wbg_adapter_53);
+    imports.wbg.__wbindgen_closure_wrapper604 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 221, __wbg_adapter_53);
         return addHeapObject(ret);
     };
     imports.wbg.__wbindgen_debug_string = function(arg0, arg1) {

diff --git a/dist/trader-leptos-31b490e956c80a34_bg.wasm b/dist/trader-leptos-31b490e956c80a34_bg.wasm
diff --git a/dist/trader-leptos-aecc120261abd10a_bg.wasm b/dist/trader-leptos-aecc120261abd10a_bg.wasm