vue-cliでVue.jsのWebアプリケーションを作る ② - transition を触ってみる

だいぶ間が空いてしまいましたが、業務に一区切りついたので 今回はVue.jsで要素にアニメーションを付けていきたいと思います。

アニメーションの設定

Vueではtransitionというラッパーコンポーネントで要素をラップすると、 その要素の表示、追加、削除時にCSSトランジションを適用するクラスを付けてくれるらしい… （参考：Enter/Leave とトランジション一覧）

初見ではよく分かりませんでしたが、とりあえず触ってみます

要素をフェードインさせてみる

とりあえず

最初なので、単純にpタグをフェードインさせるところから始めます。

<div>
  <p>おはようございます</p>
</div>

ページ表示時に「おはようございます」をフェードインさせるために pタグをtransitionコンポーネントでラップします。

<div>
  <transition name="greeting">
    <p>おはようございます</p>
  </transition>
</div>

name属性でトランジションに名前をつけると便利とのことなので、適当に名前をつけます

トランジションの設定

transitionコンポーネントには、状態に応じて次のようにクラスが付与されるとのこと。 （参考:トランジションクラス） CSSで、このクラス毎にスタイルを設定していきます。 先ほどtransitionタグ内で設定したname属性の値がクラス名の先頭に付きます。

今回はフェードインなので透明度100%→0%を1秒かけて実行します。

/* 要素の挿入前、削除後のスタイルを設定 */
.greeting-enter, .greeting-leave-to {
  opacity: 0;
}

/* トランジション中の要素の状態 */
.greeting-enter-active, .greeting-leave-active {
  transition: opacity 1s; 
}

これだけでトランジションの設定ができてしまった…簡単 ページ表示時に「おはようございます」がフェードインしてきます

デモは用意できてないですが こんな感じでアニメーションつけてポートフォリオサイトのトップページを作っていきます

次回はJavaScriptフックなども絡めて さらに複雑なアニメーションを作る予定…