improve: reverse card move motion when card top less than baseline

KawaiiZapic · Sep 5, 2024 · 9b36a0c · 9b36a0c
1 parent 31c9928
commit 9b36a0c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/pages/index.ts b/src/pages/index.ts
@@ -28,6 +28,9 @@ export function init() {
             top: pSize.top + "px"
           });
           parent.classList.add("matecho-article-card__animating");
+          if (pSize.top < 220) {
+            parent.classList.add("matecho-article-card__reverse");
+          }
           document.body.appendChild(parent);
           Object.assign(listMain.style, {
             opacity: "0",

diff --git a/src/style/index.less b/src/style/index.less
@@ -2,12 +2,9 @@
   position: fixed;
   pointer-events: none;
   transition:
-    height 0.3s,
-    width 0.3s,
-    top 0.3s,
+    all 0.3s,
     left 0.2s,
-    background-color 0s 0.3s,
-    border-radius 0.3s;
+    background-color 0s 0.3s;
   width: 824px;
   height: 240px;
   top: 223px;
@@ -18,6 +15,13 @@
   & .matecho-article-card__meta {
     animation: fade-out 0.3s forwards;
   }
+
+  &.matecho-article-card__reverse {
+    transition:
+      all 0.3s,
+      top 0.2s,
+      background-color 0s 0.3s;
+  }
 }
 
 @media (width <= 937px) {