当Redux存储数据被立即删除时，如何延迟(例如动画) React元素的删除？

// Redux存储中的数据结构
{
  elements: [
    { id: 1, text: 'Element 1', shouldDelete: false },
    { id: 2, text: 'Element 2', shouldDelete: false },
    { id: 3, text: 'Element 3', shouldDelete: false }
  ]
}

// React组件
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { deleteElement } from 'redux/actions';

const ElementList = () => {
  const elements = useSelector(state => state.elements);
  const dispatch = useDispatch();

  useEffect(() => {
    // 检查标识位并删除元素
    const timer = setTimeout(() => {
      elements.forEach(element => {
        if (element.shouldDelete) {
          dispatch(deleteElement(element.id));
        }
      });
    }, 1000); // 延迟1秒删除元素

    return () => clearTimeout(timer);
  }, [elements, dispatch]);

  return (
    <div>
      {elements.map(element => (
        <div key={element.id} className={element.shouldDelete ? 'fade-out' : ''}>
          {element.text}
        </div>
      ))}
    </div>
  );
};

export default ElementList;