Transition

Transitions

syntax

transition: property duration timing-function delay;
transition: all 0.3s ease;

example

.button {
  background: #2563eb;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

/* Transition specific properties for performance */
.card {
  transition: box-shadow 0.2s ease, transform 0.3s ease;
}

Note Prefer transitioning specific properties rather than using 'all' since transitioning everything can cause unexpected side effects and reduced performance. Stick to transform and opacity for the smoothest animations (they are GPU-accelerated).

REReact

useTransition

RE · Additional Hooks

syntax

const [isPending, startTransition] = useTransition();

example

import { useState, useTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <div>
      <nav>
        <button onClick={() => selectTab('home')}>Home</button>
        <button onClick={() => selectTab('analytics')}>Analytics</button>
        <button onClick={() => selectTab('settings')}>Settings</button>
      </nav>
      {isPending && <p>Loading...</p>}
      <TabPanel activeTab={tab} />
    </div>
  );
}

Note startTransition marks state updates as non-urgent, allowing urgent updates (like typing) to interrupt them. The isPending flag lets you show loading indicators. Unlike useDeferredValue, useTransition wraps the state update itself.

HCHTML & CSS

REReact