【Vue.js】transitionで1秒かけてopacityを0にしたい
See the Pen
transitionで1秒かけてopacityを0にしたい by りっしー (@hiwriterprogram)
on CodePen.
transitionタグ内にname属性指定をする場合
先ほどはCSS側でv-enter-activeなどプレフィックスに「v-」がついていましたが、transitionタグ内にてname属性の指定をしておくことで、CSS側のプレフィックスを変えることができます。
See the Pen
oKYzEN by りっしー (@hiwriterprogram)
on CodePen.
これでルートビュータグの中でも複数のtransitionが使えるので、別々の演出が可能となりました。
transitionタグ内に「appear」+「v-show="true"」
See the Pen
YmpGay by りっしー (@hiwriterprogram)
on CodePen.
transitionにappearを付与することによってレンダー（描画）の際に、v-enterと同じ効果を与えることができます。
画面が表示された際にアニメーションをつけたいという場合は、appearを使用しましょう。
