为什么动画不起作用？

Posted 2021-05-05

我在react / redux上聊聊。在页面上，我从redux数组中获取所有对话框。然后我为每个人画一个开始按钮。我需要添加一个动画来打开每个对话框。为此，在reducer中打开对话框，添加字段animate = true;

当我渲染页面时，我检查这个字段是否为真，然后我将类dialog_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.sortDialogs（this.props.dialogs）替换this.props.dialogs则问题就开始了。然后动画只启动一次。更确切地说，仅针对第一个对象。如果我在5秒内持续动画会打开几个聊天，那么第一个地方的动画和最后一个动画将结束，然后它将不再是。

我会立刻说，对于打开的添加，正确添加了聊天的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...
    }

}