Add tab switching animation in default view

Author: EugeneChoi4

compiler/apps/playground/components/TabbedWindow.tsx

@@ -4,7 +4,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, {
+  startTransition,
+  useId,
+  unstable_ViewTransition as ViewTransition,
+  unstable_addTransitionType as addTransitionType,
+} from 'react';
 import clsx from 'clsx';
 
 export default function TabbedWindow({
@@ -16,30 +21,50 @@ export default function TabbedWindow({
   activeTab: string;
   onTabChange: (tab: string) => void;
 }): React.ReactElement {
+  const id = useId();
+  const transitionName = `tab-highlight-${id}`;
+
+  const handleTabChange = (tab: string): void => {
+    startTransition(() => {
+      addTransitionType('tab');
+      onTabChange(tab);
+    });
+  };
+
   return (
-    <div className="flex-1 min-w-[550px] sm:min-w-0">
-      <div className="flex flex-col h-full max-w-full">
-        <div className="flex p-2 flex-shrink-0">
-          {Array.from(tabs.keys()).map(tab => {
-            const isActive = activeTab === tab;
-            return (
-              <button
-                key={tab}
-                onClick={() => onTabChange(tab)}
-                className={clsx(
-                  'active:scale-95 transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm',
-                  !isActive && 'hover:bg-primary/5',
-                  isActive && 'bg-highlight text-link',
-                )}>
-                {tab}
-              </button>
-            );
-          })}
-        </div>
-        <div className="flex-1 overflow-hidden w-full h-full">
-          {tabs.get(activeTab)}
-        </div>
+        <div className="flex-1 min-w-[550px] sm:min-w-0">
+
+    <div className="flex flex-col h-full max-w-full">
+      <div className="flex p-2 flex-shrink-0">
+        {Array.from(tabs.keys()).map(tab => {
+          const isActive = activeTab === tab;
+          return (
+            <button
+              key={tab}
+              onClick={() => handleTabChange(tab)}
+              className={clsx(
+                'transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm relative',
+                isActive ? 'text-link' : 'hover:bg-primary/5',
+              )}>
+              {isActive && (
+                <ViewTransition
+                  name={transitionName}
+                  share={{tab: 'tab-highlight'}}
+                  update={{default: 'none'}}>
+                  <div className="absolute inset-0 bg-highlight rounded-full" />
+                </ViewTransition>
+              )}
+              <ViewTransition update={{tab: 'tab-text', default: 'none'}}>
+                <span className="relative z-1">{tab}</span>
+              </ViewTransition>
+            </button>
+          );
+        })}
       </div>
+      <div className="flex-1 overflow-hidden w-full h-full">
+        {tabs.get(activeTab)}
+      </div>
+    </div>
     </div>
   );
 }

compiler/apps/playground/styles/globals.css

@@ -108,3 +108,11 @@
   object-fit: none;
   object-position: left;
 }
+
+::view-transition-old(.tab-highlight),
+::view-transition-new(.tab-highlight) {
+  height: 100%;
+}
+::view-transition-group(.tab-text) {
+	z-index: 1;
+}