/Knowledge/sources/honojs__hono/llms-full/client-components-startviewtransition-family-using-useviewtransition--part-02--cd07733d0597.md
Client Components: startViewTransition() family > Using useViewTransi...
Client Components: startViewTransition() family Using useViewTransition (part 02) Source evidence: /Sources/honojs hono/provenance.md Canonical citation: htt...
Client Components: startViewTransition() family > Using useViewTransition (part 02)
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#3-using-useviewtransition
Summary
```tsx import { useState, useViewTransition } from 'hono/jsx' import { viewTransition } from 'hono/jsx/dom/css' import { css, keyframes, Style } from 'hono/css' const rotate = keyframesfrom { rotate: 0deg; } to { rotate: 360deg; } ex...
Content
import { useState, useViewTransition } from 'hono/jsx'
import { viewTransition } from 'hono/jsx/dom/css'
import { css, keyframes, Style } from 'hono/css'
const rotate = keyframes`
from {
rotate: 0deg;
}
to {
rotate: 360deg;
}
`
export default function App() {
const [isUpdating, startViewTransition] = useViewTransition()
const [showLargeImage, setShowLargeImage] = useState(false)
const [transitionNameClass] = useState(() =>
viewTransition(css`
::view-transition-old() {
animation-name: ${rotate};
}
::view-transition-new() {
animation-name: ${rotate};
}
`)
)
return (
<>
<Style />
<button
onClick={() =>
startViewTransition(() =>
setShowLargeImage((state) => !state)
)
}
>
Click!
</button>
<div>
{!showLargeImage ? (
<img src='https://hono.dev/images/logo.png' />
) : (
<div
class={css`
${transitionNameClass}
background: url('https://hono.dev/images/logo-large.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 600px;
height: 600px;
position: relative;
${isUpdating &&
css`
&:before {
content: 'Loading...';
position: absolute;
top: 50%;
left: 50%;
}
`}
`}
></div>
)}
</div>
</>
)
}
Metadata
{
"chunk_index": 1,
"citation": "https://hono.dev/llms-full.txt#3-using-useviewtransition",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / Client Components > `startViewTransition()` family > 3. Using `useViewTransition` (2)",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 95,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "Client Components: startViewTransition() family > Using useViewTransition (part 02)",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki