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="○○" を付けてあげると、フワッと切り替わってくれました。
この記事が気に入ったらサポートをしてみませんか?