absolute/no-transition-cssproperties
Objects typed as CSSProperties must not include a 'transition' property, which conflicts with react-spring.
#Rule Details
Forbids a transition property on objects typed as CSSProperties (or React.CSSProperties). In an AbsoluteJS UI, animation is owned by react-spring; a CSS transition competes with the spring for the same properties and produces janky or canceled animations.
The rule matches the annotation by type reference or by a CSSProperties substring in the annotation text, then reports any property whose key is exactly transition. Related keys like transitionDelay are not flagged, and untyped objects are ignored. Move motion into a useSpring/useSprings animation instead.
#Examples
const fadeStyle: CSSProperties = {
color: 'red',
transition: 'all 0.3s ease'
};
const panelStyle: React.CSSProperties = { transition: 'opacity 0.5s' };No transition property
const fadeStyle: CSSProperties = { color: 'red', opacity: 1 };// Drive the animation through react-spring instead
const [fadeSprings, fadeApi] = useSpring(() => ({ opacity: 0 }));#Configuration
Enable this rule in your ESLint configuration:
{
rules: {
'absolute/no-transition-cssproperties': 'error'
}
}#Related Rules
#When Not To Use It
If a project does not use react-spring and relies on native CSS transitions for animation, this rule does not apply — leave it off.