Q&A
vue.js初心者です。
vue.jsのtransitionを使ってみようと思ったのですが上手くいきません。
はじめに
CodePenを参照して下さい。
赤い円と灰色の円がそれぞれ５つずつあります。
ここで「A」と「B」の間にある赤の円をクリックすると「A」と「B」の間に新たに「New6」の円が入ります。
実現したいこと
この赤円をクリックした後にアニメーションを適用させて新たな円を表示したいと思っています。
ですが、ご覧の通り今はクリックすると、パッと新たな円が表示され、一番下の円にアニメーションが適用されて再度表示されています。
挿入される円がアニメーションで表示され、
他の円はスムーズに下にずれて欲しい。
のです。
ちょうど公式ドキュメントの「Shuffle」「Add」「Remove」があるデモのようなイメージです。
試したこと
dataの組み方かaddMap関数内部のデータの追加の仕方に問題があるのかと思い、そこをいじって公式ドキュメントに大分寄せて作ってみたのですが、やはりうまくいきませんでした。
どなたかご存じの方がいらっしゃればご教示願えませんでしょうか。
よろしくお願いします。
【ベストアンサー決定後の追記】
解決はしましたが、CodePenを編集するので、同じ問題に当たった人の参考にならないので、
jsfiddleで同じものを作り直しました。
質問時のコードはこちらです。
karamarimo様の意見を参考に作ったものがこちらです。
ご参考までに。
回答の取得に失敗しました
