[英]why react-transition-group is not working?
当状态改变和元素挂载时,我尝试使用动画,尝试了React Transition Group文档中提到的方法,但是失败了。
我有一个类似这样的用户界面:
中心圆圈项目是活动项目,当用户选择其他项目时会更改。
当项目更改时,我需要fadeIn和fadeOut动画效果。
创建了代码codeandbox链接的示例
一小段代码:
JSX:
<TransitionGroup>
{this.state.items.map((data, index) => (
<CSSTransition key={index} timeout={1000} classNames="item">
<div
className={"list " + (index === 2 ? " active" : "")}
key={index}
onClick={() => this.setItems(data)}
>
<span>{data}</span>
</div>
</CSSTransition>
))}
</TransitionGroup>
CSS:
.item-enter {
opacity: 0;
}
.item-enter-active {
opacity: 1;
transition: opacity 1000ms ease-in;
}
.item-exit {
opacity: 1;
}
.item-exit-active {
opacity: 0;
transition: opacity 1000ms ease-in;
}
看起来您只是在重新排序元素。
试试这个https://popmotion.io/pose/examples/posegroup-reordering/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.