对列表中的新元素进行动画处理

Question

我正在尝试构建一个反应应用，以显示诸如this之类的链接列表。我想在箭头上获得动画。

class Main extends Component {
    state = {
        list: [1,2,3,4,5],
        currentValue: '',
    }
    newElementHandler = (e) => {
      this.setState({
        currentValue: e.target.value
      })
    }
    submitHandler = (e) => {
        e.preventDefault();
        this.setState({
          list: [...this.state.list, this.state.currentValue],
          currentValue: ''
        });
    }
    render() {
        let showlist = [...this.state.list]
        return (
            <div>
                <div className="list">
                {showlist.map((ele,id)=>(
                    <span>
                        <span className="arrow">--> </span>
                        <span>{ele}</span>
                    </span>
                ))}
                </div>
                <form onSubmit={this.submitHandler}>
                    <input value={this.state.currentValue} onChange={this.newElementHandler} />
                    <button type="submit" >Submit</button>
                </form>
                
            </div>
        )
    }
}

现在，它只显示正确的更新列表。 相反，在输入新元素之后，我想要一个连接到该新元素的箭头动画（如以上链接中给出的那样）。我真的不知道如何实现这一点。有人可以帮我...谢谢