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,6 +21,16 @@ 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 flex-col h-full max-w-full">
       <div className="flex p-2 flex-shrink-0">
@@ -24,13 +39,22 @@ export default function TabbedWindow({
           return (
             <button
               key={tab}
-              onClick={() => onTabChange(tab)}
+              onClick={() => handleTabChange(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',
+                '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',
               )}>
-              {tab}
+              {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>
           );
         })}

compiler/apps/playground/styles/globals.css

@@ -109,3 +109,11 @@
 ::view-transition-new(.container) {
   height: 100%;
 }
+
+::view-transition-old(.tab-highlight),
+::view-transition-new(.tab-highlight) {
+  height: 100%;
+}
+::view-transition-group(.tab-text) {
+	z-index: 1;
+}