fix(explorer): use css breadcrumb transition

Author: bpierre

apps/explorer/src/comps/Breadcrumbs.tsx

@@ -180,27 +180,16 @@ export function Breadcrumbs(props: Breadcrumbs.Props) {
 
 	const isEmpty =
 		(resolvedPathname === '/' && !hasPendingCrumb) || displayCrumbs.length === 0
-	const [isVisible, setIsVisible] = React.useState(false)
-
-	React.useEffect(() => {
-		if (isEmpty) {
-			setIsVisible(false)
-			return
-		}
-
-		const frame = requestAnimationFrame(() => setIsVisible(true))
-		return () => cancelAnimationFrame(frame)
-	}, [isEmpty])
 
 	return (
 		<nav
 			aria-label="Breadcrumb"
 			aria-hidden={isEmpty}
 			className={cx(
-				'flex items-center gap-1 text-[12px] text-secondary overflow-x-auto overflow-y-hidden scrollbar-none h-5 pl-0.5 origin-left transition-[opacity,scale] duration-[80ms]',
-				isVisible
-					? 'opacity-100 scale-100'
-					: 'opacity-0 scale-[0.97] pointer-events-none',
+				'flex items-center gap-1 text-[12px] text-secondary overflow-x-auto overflow-y-hidden scrollbar-none h-5 pl-0.5 origin-left transition-[opacity,scale] duration-[80ms] starting:opacity-0 starting:scale-[0.97]',
+				isEmpty
+					? 'opacity-0 scale-[0.97] pointer-events-none'
+					: 'opacity-100 scale-100',
 				className,
 			)}
 		>