【アウトプット㊽】-Vue- トランジションアニメーション
Vue.js はデフォルトでトランジションという機能を提供していて、それを利用することでアニメーションを実装することができる。
■フェードインで文字を表示してみる
▼HTML
<div id="app">
<transition appear>
<div v-html="message"></div>
</transition>
</div>
<div v-html="message"></div>に対して<transition> タグで囲み、トランジションクラスに対して CSS を指定する。
※appear属性
初期描画時にトランジションで表示することができる。
▼CSS
.v-enter-active {
transition: opacity 1s;
}
.v-enter {
opacity: 0;
}
.v-enter-to {
opacity: 1;
}
トランジションクラス
◎v-enter-active
表示アニメーション中のスタイル
◎v-enter
表示アニメーションの開始時のスタイル
◎v-enter-to
表示アニメーションの終了時のスタイル
▼vue.js
let app = new Vue({
el: "#app",
data:{
message:"こんにちは"
}
});
この記事が気に入ったらサポートをしてみませんか?