見出し画像

Vueのtransitionが効かないとき

vueを使って、フワッと要素を切替表示したいと思います。
こんな感じで↓

ソースはこちら↓

<transition name="formTxt">
  <span v-if="isShown">3日以内に返信いたします。お気軽にお問い合わせください。</span>
  <span v-else>お問い合わせ、ありがとうございました。</span>
</transition>

何の変哲もないDOMですが、この状態だとどれだけCSSを調整してもトランジションが効きません。

ぱぱぱっと変わっちゃう。

要素を別物と明記する

spanが一つだけなら問題なくフワッとしてくれるのですが
isShownの状態に合わせてspanを2つ交互に切り替えるためには
それぞれのspanが別物だと明記しないといけないそうなのです。

<transition name="formTxt">
  <span v-if="isShown" key="before">3日以内に返信いたします。お気軽にお問い合わせください。</span>
  <span v-else key="after">お問い合わせ、ありがとうございました。</span>
</transition>

key="○○" を付けてあげると、フワッと切り替わってくれました。

この記事が気に入ったらサポートをしてみませんか?