# `react-doctor/no-layout-transition-inline`

Use `transform` and `opacity` for transitions — they run on the compositor thread. For height animations, use `grid-template-rows: 0fr → 1fr`

- **Category:** Performance
- **Severity:** warn
- **Source:** oxlint-plugin-react-doctor
- **Framework:** global
- **Enabled when:** always

## Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Confirm style.transition or style.transitionProperty explicitly names a layout-triggering property — width, height, their min/max variants, or padding/margin (with any side suffix). The rule deliberately skips values containing 'all'. Animating max-height from 0 to a fixed value is the most common pattern this catches.

## Fix prompt

Use this once validation confirms the diagnostic is real.

Animate transform (scale/translate) and opacity instead — they run on the compositor and skip layout/paint. For accordion-style height animations, transition grid-template-rows from 0fr to 1fr, or animate clip-path. See https://web.dev/articles/animations-guide