[英]Why animation does not work in react?
我在react / redux上聊天。 在页面上,我从redux数组中获得了所有对话框。 然后我为每个按钮绘制一个打开按钮。 我需要添加动画以打开每个对话框。 为此,我在化简器中打开对话框,添加字段animate = true;。
渲染页面时,我检查此字段是否为true,然后将classdialog_animate添加到元素中
这是组件代码:
class PageDialogs extends Component {
sortDialogs(dialogs){
return dialogs.sort(function(a, b){
if (a.openedAt < b.openedAt) {
return -1;
}
else if (a.openedAt > b.openedAt) {
return 1;
}
else {
return 0;
}
});
}
showDialogs(){
return this.props.dialogs.map(function(dialog, key){
if (dialog.active) {
return (
<div key={key} className={dialog.animate ? 'dialog_animate' : ''} >
<Dialog dialog={dialog} />
</div>
);
}
})
}
render() {
if (typeof this.props.dialogs !== 'undefined') {
return (
<div>
<div className='page-dialogs'>
{this.showDialogs()}
</div>
</div>
);
}
else {
return (
<div>
<Preloader />
</div>
)
}
}
}
CSS:
.dialog_animate {
animation: dialog_animate 5s ease-in-out forwards;
-webkit-animation: dialog_animate 5s ease-in-out forwards;
}
以这种形式,动画起作用。 但是我需要this.props.dialogs来开始排序。 如果将this.props.dialogs替换为this.sortDialogs(this.props.dialogs),则问题开始。 然后动画仅开始一次。 更确切地说,仅针对第一个对象。 如果我在5秒钟内持续播放动画,则会打开一些聊天记录,则动画首先出现,最后一个将会结束,然后不再显示。
我将立即说一下,正确添加了chats的dialog_animate类,添加了公开类并删除了所有其他类。
告诉我原因可能是什么,如何解决?
谢谢。
我不确定我是否理解正确。 但是,5s是很长的动画。 特别是当React组件每次收到新的道具时都重新渲染时。
我会为单个对话框适当地制作一个组件,并且(如果可能)将动画保留在其中。
否则,您的代码结构可能会有所不同。
export default class PageDialogs extends React.PureComponent {
sortDialogs = (dialogs) => {
return dialogs.sort((a, b) => {
if (a.openedAt < b.openedAt) {
return -1;
} else if (a.openedAt > b.openedAt) {
return 1;
} else {
return 0;
}
});
}
showDialogs = (sortedDialogs) => {
return sortedDialogs.map((dialog, key) => {
if (dialog.active) {
return (
<div key={key} className={dialog.animate ? 'dialog_animate' : ''} >
<Dialog dialog={dialog} />
</div>
);
}
});
}
render() {
const { dialogs } = this.props;
if (!dialogs) {
return null;
}
// consider sorting on a higher level
const sortedDialogs = this.sortDialogs(dialogs);
// It would be better if this was it's own component.
const displayedDialogs = this.showDialogs(sortedDialogs);
return (
<div>
<div className="page-dialogs">
{displayedDialogs}
</div>
</div>
);
// etc...
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.