Im trying to create a simple animation with TransitionGroup and CSSTransition but it behaves unexpectedly unless I remove the nodeRef of the CSSTransition.
(by unexpectedly I mean that the style is not applied or both exitActive and enterActive css classes are applied on the same element. when I remove the nodeRef it works but I get the error 'Warning: findDOMNode is deprecated in StrictMode.')
I found this and it explains that
When changing key prop of Transition in a TransitionGroup a new nodeRef need to be provided to Transition with changed key prop
So the question is:
This is the code:
const [dayIndex, setDayIndex] = useState(0);
const someRef = useRef(null)
...
return (
...
<TransitionGroup component={null}>
<CSSTransition nodeRef={someRef} key={dayIndex} classNames={styles} timeout={1000}>
<div ref={someRef} className="...">
{props.days[dayIndex]}
</div>
</CSSTransition>
</TransitionGroup>
...
)
(props.days is an array of elements)
Thanks
I found a way to make it work. each item in the props.days needs its own component with CSSTransition and its own nodeRef and the content with the same ref. to select which item will show use the "in" property.
example:
function Animation(props) {
const ref = useRef(null);
return (
<CSSTransition in={props.index === props.activeIndex} nodeRef={ref} key={props.index} classNames={styles} timeout={900}>
<div ref={ref} className="...">{props.content}</div>
</CSSTransition>
);
}
const [dayIndex, setDayIndex] = useState(0);
...
function Main() {
return (
...
<TransitionGroup component={null}>
<CSSTransition nodeRef={someRef} key={dayIndex} classNames={styles} timeout={1000}>
{
props.days.map((content, index) => (
<Animation content={content} index={index} key={index} activeIndex={dayIndex}/>
))
}
</CSSTransition>
</TransitionGroup>
...
)
}