Javascript 对列表中的新元素设置动画作出反应

我正在尝试构建一个react应用程序，它可以显示类似的链接列表。我想得到我的箭头动画

类主扩展组件{
状态={
清单：[1,2,3,4,5]，
当前值：“”，
}
newElementHandler=（e）=>{
这是我的国家({
当前值：e.target.value
})
}
submitHandler=（e）=>{
e、 预防默认值（）；
这是我的国家({
列表：[…this.state.list，this.state.currentValue]，
当前值：“”
});
}
render（）{
让showlist=[…this.state.list]
返回(
{showlist.map（（ele，id）=>(
--> 
{ele}
))}
提交
)
}
}

现在，它只是正确地显示更新的列表。 相反，在输入一个新元素后，我想要一个连接到这个新元素的箭头动画（如上面链接中所示）。我真的不知道如何实现这一点。有人能帮帮我吗…谢谢

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