為什么動畫不起作用？

Question

我在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類，添加了公開類並刪除了所有其他類。

告訴我原因可能是什么，如何解決？

謝謝。

Answer 1

我不確定我是否理解正確。 但是，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...
    }

}