chore: adjust animation to css (#468)

Co-authored-by: RayJason <[email protected]>
Tencent · Apr 7, 2024 · 39e2f47 · 39e2f47
1 parent 6540dd7
commit 39e2f47
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 62 deletions.
diff --git a/packages/components/src/components/td-theme-tabs/style.less b/packages/components/src/components/td-theme-tabs/style.less
@@ -54,66 +54,4 @@
       color: #fff;
     }
   }
-}
-
-:root::view-transition-group(root) {
-  animation-duration: 1s;
-}
-
-:root::view-transition-new(root),
-:root::view-transition-old(root) {
-  mix-blend-mode: normal;
-}
-
-:root::view-transition-old(root),
-:root[theme-mode='dark']::view-transition-old(root) {
-  animation: none;
-}
-
-:root::view-transition-new(root) {
-  animation-name: dark-to-light;
-}
-
-:root[theme-mode='dark']::view-transition-new(root) {
-  animation-name: light-to-dark;
-}
-
-@keyframes light-to-dark {
-  from {
-    clip-path: polygon(
-      0 0,
-      0 0,
-      calc(tan(8deg) * -100vh) 100%,
-      calc(tan(8deg) * -100vh) 100%
-    );
-  }
-
-  to {
-    clip-path: polygon(
-      0 0,
-      calc((tan(8deg) * 100vh) + 100%) 0,
-      100% 100%,
-      calc(tan(8deg) * -100vh) 100%
-    );
-  }
-}
-
-@keyframes dark-to-light {
-  from {
-    clip-path: polygon(
-      calc((tan(8deg) * 100vh) + 100%) 0,
-      calc((tan(8deg) * 100vh) + 100%) 0, 
-      100% 100%,
-      100% 100%
-    );
-  }
-
-  to {
-    clip-path: polygon(
-      0 0,
-      calc((tan(8deg) * 100vh) + 100%) 0,
-      100% 100%,
-      calc(tan(8deg) * -100vh) 100%
-    );
-  }
 }
diff --git a/packages/components/src/styles/animation.less b/packages/components/src/styles/animation.less
@@ -0,0 +1,54 @@
+// light-dark-8deg-animation
+@keyframes light-to-dark {
+    from {
+        clip-path: polygon(0 0,
+                0 0,
+                calc(tan(8deg) * -100vh) 100%,
+                calc(tan(8deg) * -100vh) 100%);
+    }
+
+    to {
+        clip-path: polygon(0 0,
+                calc((tan(8deg) * 100vh) + 100%) 0,
+                100% 100%,
+                calc(tan(8deg) * -100vh) 100%);
+    }
+}
+
+@keyframes dark-to-light {
+    from {
+        clip-path: polygon(calc((tan(8deg) * 100vh) + 100%) 0,
+                calc((tan(8deg) * 100vh) + 100%) 0,
+                100% 100%,
+                100% 100%);
+    }
+
+    to {
+        clip-path: polygon(0 0,
+                calc((tan(8deg) * 100vh) + 100%) 0,
+                100% 100%,
+                calc(tan(8deg) * -100vh) 100%);
+    }
+}
+
+:root::view-transition-group(root) {
+    animation-duration: 1s;
+}
+
+:root::view-transition-new(root),
+:root::view-transition-old(root) {
+    mix-blend-mode: normal;
+}
+
+:root::view-transition-old(root),
+:root[theme-mode='dark']::view-transition-old(root) {
+    animation: none;
+}
+
+:root::view-transition-new(root) {
+    animation-name: dark-to-light;
+}
+
+:root[theme-mode='dark']::view-transition-new(root) {
+    animation-name: light-to-dark;
+}
diff --git a/packages/components/src/styles/main.less b/packages/components/src/styles/main.less
@@ -4,3 +4,4 @@
 @import "./nprogress.less";
 @import "./docs.less";
 @import "./timeline.less";
+@import "./animation.less";