Javascript 反应-设置数组中第一个新元素的动画

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

例如，我的状态中有这个数组

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));

元素现在将在数组中为

0

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

请看这张GIF：

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

我怎样才能在反应中做到这一点

---

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

如何设置元素动画？如何设置元素动画？

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

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

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

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