過渡動畫使用反應，SVG

Question

我有一個生成一些SVG，像這樣一個陣營組成：

<svg width="1200" height="300" data-reactid=".0"> <path d="M150 200 l300 10 l0 40 l-300 -10z" fill="green" data-reactid=".0.$http=2//localhost=28080/api/shapes/1"></path> <path d="M300 50 l50 50 l-100 0z" fill="purple" data-reactid=".0.$http=2//localhost=28080/api/shapes/3"></path> <path d="M40 40 H10 V10 H-10 S 50 30 10 44z" fill="brown" data-reactid=".0.$http=2//localhost=28080/api/shapes/4"></path> </svg>

的<path>元素，會在服務器上更新。因爲它使用虛擬DOM，所以只作出/刪除它需要的元素。 d=屬性可以改變，移動元素。

但是，元素從一個地方跳到另一個地方。如果正在移動到其新位置的元素將會很好。

有沒有人有任何建議的最佳方式來實現這一目標？

Answer 1

對於它的價值：

最後，我創建了一個陣營組件渲染<svg />標籤。 然後，我添加了一個componentDidUpdate()方法，使用d3在我的svg標籤中添加內容。

廣泛而言，在這裏討論的方法詳細介紹：

http://bl.ocks.org/herrstucki/9205257

顯然，以這種方式使用D3比使用反應每<path>元素更好的性能。