reverseqr

commit 343034053256dc98bfa4599a9e94f8b79b4f974c
parent 8b608a527a049fa4f21244edcbf6d6b608119da3
Author: tongong <tongong@gmx.net>
Date:   Wed, 30 Mar 2022 11:56:00 +0200

disable transition after scroll animation

Diffstat:
M
src/main.js
 | 
9
++++++++-
M
src/styles.css
 | 
6
+++++-

2 files changed, 13 insertions(+), 2 deletions(-)
diff --git a/src/main.js b/src/main.js
@@ -6,9 +6,16 @@ const qrView = require("./components/qr-view.js");
 store.subscribe(s => s, () => m.redraw());
 
 const main = () => {
+    let qrDelay = store().qr;
+    store.subscribe(s => s.qr, qrn => window.setTimeout(
+        () => { qrDelay = qrn; m.redraw(); }, 1000
+    ));
     return {
         view: () => m(".pagewrap", {
-            class: store().qr? "" : "scroll-down",
+            class: [
+                store().qr? "" : "scroll-down",
+                qrDelay? "" : "scroll-down-finished",
+            ].join(" "),
         },
             m(qrView),
             m(editView),
diff --git a/src/styles.css b/src/styles.css
@@ -51,10 +51,14 @@ textarea::-webkit-scrollbar {
 }
 
 .scroll-down {
-    transition: ease-in-out top 0.8s;
+    transition: cubic-bezier(.65,.05,.17,1.01) top 1s;
     top: -100vh;
 }
 
+.scroll-down-finished {
+    transition: none;
+}
+
 .page {
     position: relative;
     width: 100vw;