add TransitionAPI in theme toggle (#466)

* feat: add TransitionAPI in theme toggle * feat: update transition animation * feat: update transition 8deg animation
Tencent · Apr 7, 2024 · 46bcb98 · 46bcb98
1 parent bcc7e09
commit 46bcb98
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 6 deletions.
diff --git a/packages/components/src/components/td-theme-tabs/index.js b/packages/components/src/components/td-theme-tabs/index.js
@@ -7,12 +7,21 @@ import { watchHtmlMode } from '@utils';
 // const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 const storageChangeEvent = new CustomEvent('storageChange');
 
-function handleTabClick(host, currentTheme) {
+function toggleTheme(host, currentTheme) {
   document.documentElement.removeAttribute('theme-mode');
   Object.assign(host, { theme: currentTheme });
   document.documentElement.setAttribute('theme-mode', currentTheme);
 }
 
+function handleTabClick(host, event, currentTheme) {
+  const root = document.documentElement;
+  const prevTheme = root.getAttribute('theme-mode');
+  if (prevTheme === currentTheme) return;
+
+  if (!document.startViewTransition) return toggleTheme(host, currentTheme);
+  document.startViewTransition(() => toggleTheme(host, currentTheme));
+}
+
 function initBlockStyleMap(host) {
   requestAnimationFrame(() => {
     const { shadowRoot } = host;
@@ -50,7 +59,7 @@ export default define({
 
       if (lastTheme) {
         document.documentElement.removeAttribute('theme-mode');
-        
+
         Object.assign(host, { [key]: lastTheme });
         document.documentElement.setAttribute('theme-mode', lastTheme);
         invalidate();
@@ -74,8 +83,18 @@ export default define({
     return html`
       <div class="TDesign-theme-tabs">
         <div class="TDesign-theme-tabs__block" style=${blockStyle || {}}></div>
-        <div onclick=${(host) => handleTabClick(host, 'light')} data-theme="light" class="item sun ${theme === 'light' ? 'active' : ''}" innerHTML=${sunIcon}></div>
-        <div onclick=${(host) => handleTabClick(host, 'dark')} data-theme="dark" class="item moon ${theme === 'dark' ? 'active' : ''}" innerHTML=${moonIcon}></div>
+        <div
+          onclick=${(host, e) => handleTabClick(host, e, 'light')}
+          data-theme="light"
+          class="item sun ${theme === 'light' ? 'active' : ''}"
+          innerHTML=${sunIcon}
+        ></div>
+        <div
+          onclick=${(host, e) => handleTabClick(host, e, 'dark')}
+          data-theme="dark"
+          class="item moon ${theme === 'dark' ? 'active' : ''}"
+          innerHTML=${moonIcon}
+        ></div>
       </div>
     `.css`${style}`;
   },

diff --git a/packages/components/src/components/td-theme-tabs/style.less b/packages/components/src/components/td-theme-tabs/style.less
@@ -15,9 +15,8 @@
   justify-content: space-between;
 
   &__block {
-    position: absolute;
     background-color: var(--bg-color-tab-select);
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, .15);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
     position: absolute;
     height: calc(100% - 4px);
     transition: all var(--anim-time-fn-easing) var(--anim-duration-moderate);
@@ -55,4 +54,66 @@
       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%
+    );
+  }
 }