我正在尝试使用react-transition-group对列表中的元素进行动画处理。动画对于添加到列表的元素效果很好。这些都将动画化进出。问题是默认元素不会显示动画。
我要说的是,新元素将-enter-done类设置为它们,而默认元素则没有。有办法吗?
export function Test({
addNewItem,
removeItem,
items,
}: IProps) {
return (
<div>
<TransitionGroup>
{items.map(item=> (
<CSSTransition
key={item.value}
timeout={500}
classNames={{
enter: style.recommendEnter,
enterActive: style.recommendEnterActive,
enterDone: style.recommendEnterDone,
exit: style.recommendExit,
exitActive: style.recommendExitActive,
exitDone: style.recommendExitDone,
}}
unmountOnExit
>
<button
onClick={() => addItem(item)}
>
{item.label}
</button>
</CSSTransition>
))}
</TransitionGroup>
<div />
</div>
);
}