【アウトプット㊽】-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:"こんにちは"
    }
});