错误行为:在新添加新项目时,所有项目都会激活“进入”,删除项目时,“退出”和“退出”都不会运行以删除或任何其他项目。
当过渡子项直接位于 TransitionGroup 组件内时,动画工作正常。但是我的代码的逻辑是这样的,我必须在另一个组件中运行它。动画不像以前那样工作了。
除了将注入的 props 分散到嵌套的 Transition 组件中之外,我们还有什么必须做的吗?
像这样工作
<TransitionGroup>
{fruits.map(({id,name}) => (<Transition key={id} timeout={1000}>
{(state) => {
//state logic
return (<h3>{name}</h3>);
}}
</Transition>)}
</TransitionGroup>
不是这样工作
const ChildrenComp = (props) => {
return fruits.map(({id,name} => (<Transition {...props} key={id} timeout={1000}>
{(state) => {
//state logic
return (<h3>{name}</h3>);
}}
</Transition>));
};
<TransitionGroup>
<ChildrenComp /> // inside another component
</TransitionGroup>
完整代码
const Animate = () => {
const [fruits,setfruits] = React.useState(items);
const handleAdd = () => {
setfruits((prev) => setfruits([
...prev,{ id: uuid(),name: `fruit-${uuid().slice(0,4)}` },]));
};
const handleDelete = () => {
setfruits((prev) => setfruits(prev.slice(0,prev.length - 1)));
};
const GroupChildren = (props) => {
return fruits.map(({id,name}) => {
return (
<div key={id}>
<Transition {...props} key={id} timeout={TIMEOUT}>
{(state) => {
const isExiting = state === 'exiting' || state === 'exited';
const isEntering = state === 'entering';
const isEntered = state === 'entered';
const animateclasses = classnames({
'animation-exit': isExiting,'animation-enter': isEntering,'animation-entered': isEntered,});
if (state === 'exiting' || state === 'exited') {
}
return (
<h3 classname={animateclasses}>{name}</h3>
);
}}
</Transition>
</div>
);
});
};
return (
<div>
<h1>Animation</h1>
<TransitionGroup>
{fruits && <GroupChildren />}
</TransitionGroup>
<div>
<button onClick={handleAdd}>add</button>
<button onClick={handleDelete}>delete</button>
</div>
</div>
);
};
样式
.animation-enter {
background-color: green;
}
.animation-exit {
background-color: red;
}
.animation-entered {
background-color: #ddd;
}