vue.jsのv-forとtransition-groupの組み合わせが上手く行きません。

Question

vue.js初心者です。
vue.jsのtransitionを使ってみようと思ったのですが上手くいきません。

はじめに

CodePenを参照して下さい。
赤い円と灰色の円がそれぞれ５つずつあります。
ここで「A」と「B」の間にある赤の円をクリックすると「A」と「B」の間に新たに「New6」の円が入ります。

実現したいこと

この赤円をクリックした後にアニメーションを適用させて新たな円を表示したいと思っています。
ですが、ご覧の通り今はクリックすると、パッと新たな円が表示され、一番下の円にアニメーションが適用されて再度表示されています。

挿入される円がアニメーションで表示され、
他の円はスムーズに下にずれて欲しい。
のです。

ちょうど公式ドキュメントの「Shuffle」「Add」「Remove」があるデモのようなイメージです。

試したこと

dataの組み方かaddMap関数内部のデータの追加の仕方に問題があるのかと思い、そこをいじって公式ドキュメントに大分寄せて作ってみたのですが、やはりうまくいきませんでした。

どなたかご存じの方がいらっしゃればご教示願えませんでしょうか。
よろしくお願いします。

【ベストアンサー決定後の追記】

解決はしましたが、CodePenを編集するので、同じ問題に当たった人の参考にならないので、
jsfiddleで同じものを作り直しました。

質問時のコードはこちらです。
karamarimo様の意見を参考に作ったものがこちらです。

ご参考までに。

Answer 1

一番下の円にアニメーションが適用されて再度表示されています。

それはちゃんとキーを指定していないからですね。どの要素が追加されたのかをVueはキーで判断します。indexを指定してしまうと、最初キーは 0,1,...,4 であり、赤ボタンをクリックすると 0,1,...5 になりますので、indexが5のデータが追加されたんだと判断されます。

たまたま固有のデータであるNoが指定されているので、それをキーにすればうまくいきます。

他の円がスムーズにずれないのは、transition: all 1s;を.radius-itemのところに移動させると直りました。

CodePen

Comments

[退会済みユーザー]

とてもわかり易い回答ありがとうございました！！
参考にさせていただきます。