[英]Why animation does not work in react?
I make a chat on the react/redux . 我在react / redux上聊天。 On the page I get from the redux array with all the dialogs.
在页面上,我从redux数组中获得了所有对话框。 Then I draw an opening button for each of them.
然后我为每个按钮绘制一个打开按钮。 I need to add an animation to open each dialog.
我需要添加动画以打开每个对话框。 For this, in the reducer I open the dialog, add the field animate = true;
为此,我在化简器中打开对话框,添加字段animate = true;。
And when I render the page, I check if this field is true, then I add the class dialog_animate to the element 渲染页面时,我检查此字段是否为true,然后将classdialog_animate添加到元素中
Here is the component code: 这是组件代码:
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: CSS:
.dialog_animate {
animation: dialog_animate 5s ease-in-out forwards;
-webkit-animation: dialog_animate 5s ease-in-out forwards;
}
In this form, the animation works. 以这种形式,动画起作用。 But I need this.props.dialogs to start sorting.
但是我需要this.props.dialogs来开始排序。 If this.props.dialogs is replaced by this.sortDialogs (this.props.dialogs) then the problem begins.
如果将this.props.dialogs替换为this.sortDialogs(this.props.dialogs),则问题开始。 Then the animation starts only once.
然后动画仅开始一次。 More precisely only for the first object.
更确切地说,仅针对第一个对象。 If I within 5 seconds, which lasts the animation will open a few chats, then the animation in the first place and the last one will end, and then it will no longer be.
如果我在5秒钟内持续播放动画,则会打开一些聊天记录,则动画首先出现,最后一个将会结束,然后不再显示。
At once I will say that the dialog_animate class for chats is added correctly, for the open add, and for all the rest is removed. 我将立即说一下,正确添加了chats的dialog_animate类,添加了公开类并删除了所有其他类。
Tell me what can be the reason and how this can be fixed? 告诉我原因可能是什么,如何解决?
Thank you. 谢谢。
I'm not quite sure if I understand this correctly. 我不确定我是否理解正确。 However, 5s is a long animation.
但是,5s是很长的动画。 Especially when the React component rerenders every time it receives new props.
特别是当React组件每次收到新的道具时都重新渲染时。
I would properly make a component for a single dialog, and (if possible) keep the animation within. 我会为单个对话框适当地制作一个组件,并且(如果可能)将动画保留在其中。
Otherwise, you could structure your code a bit differently. 否则,您的代码结构可能会有所不同。
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.