我有一个项目数组，我在我的UI中Map：

let arr = [1, 2, 3, 4, 5, 6, 7... n]

字符串
假设我想将每个元素Map为一个JSX段落，但是，我希望能够通过调用一个函数swap来更改数组中每个元素的顺序，该函数会更改arr的值（假设arr存储在redux slice中，并在调用函数swap后自动更新。
例如，如果我调用函数swap(3, "up")，那么项目3将与项目2交换，结果将是：[1, 3, 2, 4, 5, 6, 7... n]。相反，如果交换另一个方向-down，则该项目将与其后继项目交换。
我还有一个delete函数，它将完全删除该项目，并且在它之后的所有项目都将增加一个空格：delete(4)将导致[1, 2, 3, 5, 6, 7...n]。
这个逻辑已经完成了，所有的工作，我已经观察到的变化适用于完美的UI。问题是我需要以某种方式通知用户发生了这种情况。例如，使动作不是即时的过渡或动画。
以下是我写的：

const lectures = useSelector((state: RootState) => state.course.lectures) 
/* lectures always is sorted by its positional index which changes with swap 
(swapping two elements) and delete (deletes current and bumps up all its 
successors) */ 

const delete = (lecture) => { 
    /* a dispatch to an action that will result in deleting an item from the lectures array */
}

const swap = (lecture, direction) => { 
    /* a dispatch to an action that will result in swapping the given lecture with its pred/succ depending on the direction. */
}

return (
  <div>
    {
      lectures.map(lect => (
        <span>
            <h3>{lect.position_index}</h3>
            <p>{lect.title}</p>
            <button onClick={e => swap(lect, "up")}>UP</button>
            <button onClick={e => swap(lect, "down")}>DOWN</button>
            <button onClick={e => delete(lect)}>DELETE</button>
        </span>
      )
    }
  </div>
)

型
这些变化是适用的，但它们是瞬时的。我想添加一些过渡- 200或300毫秒的过渡消失效果删除和tbh任何交换它不重要，只要用户知道它发生。我不希望用户最终删 debugging 误的讲座，因为他们认为他们的删除没有生效。
我为任何误用的术语道歉。