問題
上記に問題箇所のCodepen用意しました。
これはVue.js公式のトランジションのサンプルを僅かに変えたものです(分かりやすく黒いボーダーを加えて、transitionする時間も2秒に変えています)。
「Add」をクリックすると、フワッとしたアニメーションと共にランダムにdiv
要素で囲まれた数字が入ります。
それはいいのですが、「Remove」をクリックすると、黒いボーダーが崩れてクシャッと潰れてからス~と消えます。
ブロック要素であるdivに囲まれた数字が、なぜ消えるときだけinline要素のようになってから消えるのでしょうか?
display:block
と入れても、特に効果はありませんでした。
できればブロック要素のまま、ボーダーなども横幅いっぱいに広がったままス~と消えて欲しいのですが、この場合どうすればよいでしょうか?
ご存知の方どうぞよろしくお願いします。
回答2件
あなたの回答
tips
プレビュー