javascript - React - 动画数组中的第一个新元素

Question

我想为数组中的第一个对象设置动画。

作为一个例子，我在我的州有这个数组。

this.state = {
    elements: []
}

我首先通过 post 请求填充数组，所以看起来像这样：

await this.httpService.getWithAuthorization<Array<BoardElementViewModel>>(`/boards/${this.props.activeBoardState.boardId}/elements`)
                      .then((response: Array<BoardElementViewModel>) => {
            this.setState(() => ({
                elements: response
            }));
        })
        .catch((e) => console.warn(e));

在这一点上，应该没有任何动画。

我像这样渲染这个数组：

render() {
    return (
        <div className="board-elements">
            {this.props.activeBoardState.boardElements.map((element: BoardElementViewModel, index) => {
                return (
                    <BoardElement
                        key={index}
                        element={element}/>
                    )
            })}
        </div>
    )
}

我们现在应该有一个元素列表，我现在要做的是在列表顶部添加一个新元素。所以我使用 unshift 向数组中添加一个新元素，如下所示：

const response = {} //getting response left out of example.

let elements = this.state.elements;
elements.unshift(response);

this.setState(() => ({
    elements: elements 
}));

该元素现在将0位于数组中并位于列表顶部。但是，当我现在尝试为“新”元素设置动画时，动画将应用于最后一个元素。这是因为那是刚刚安装的元素，其他元素只是被替换，因此它们没有发生任何事情。

看看这个 GIF：https ://gyazo.com/7d19ba9be962f3d475e59fc8e474da30

忽略加载的东西，但这很好地说明了我想要实现的目标。

我如何在 React 中做到这一点？

注意：我知道如何动画元素，动画数组中的最后一个元素很容易，我只需要知道如何动画第一个元素。

标签： javascriptreactjstypescript