javascript - 什么是处理道具变更处理SVG动画的最佳方法？

我有以下两个ReactJS组件：

MyGraphThingy，充当实际元素的容器。它呈现为一个svg元素，里面有子元素。

MyGraphElement，呈现为圆圈。

在第三个组件中，render方法返回以下内容：

<MyGraphThingy><MyGraphElement position={this.getPosition()/></MyGraphThingy>

其中getPosition（）取决于组件状态。因此，如果组件的相关状态发生变化，SVG圈的位置应该改变。

问题是，实施动画的最佳方法是什么，而不是从一个地方跳到另一个地方，它会顺利过渡？

圆圈只是一个例子，真正的用例涉及动画几乎所有SVG属性。

不，我不想依赖D3，是的，理想情况下，我想在MyGraphThingy中处理这个问题，而不是使用像react-animate这样的模块。我应该在这里使用一些生命周期方法，但是我想知道如何实现实际的动画。