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

Related rules

More Performance rules from the rules reference:

• react-doctor/no-long-transition-duration: Keep UI transitions under 1s — 100-150ms for instant feedback, 200-300ms for state changes, 300-500ms for layout changes. Use longer durations only for page-load hero animations
• react-doctor/no-permanent-will-change: Add will-change on animation start (`onMouseEnter`) and remove on end (`onAnimationEnd`). Permanent promotion wastes GPU memory and can degrade performance
• react-doctor/no-scale-from-zero: Use `initial={{ scale: 0.95, opacity: 0 }}` — elements should deflate like a balloon, not vanish into a point
• react-doctor/no-transition-all: List specific properties: `transition: "opacity 200ms, transform 200ms"` — or in Tailwind use `transition-colors`, `transition-opacity`, or `transition-transform`
• react-doctor/no-unstable-nested-components: Hoist nested components to module scope or memoize them — never define one inside another.