如何在从映射数组渲染的 JSX 上添加过渡？

Question

我在 UI 中映射了一系列项目：

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

假设我想将每个项目映射为

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 毫秒的转换消失对删除的影响，而且任何交换的东西都没关系，只要用户知道它发生了。 我不希望用户最终删除错误的讲座，因为他们认为他们的删除没有生效。

对于任何误用术语，我深表歉意。

Answer 1

尝试使用 useState 更改 css 样式，不确定它是否 100% 是您正在寻找的，但它绝对有效。