XXとしてる: Vue.js その3

トランジション

CSSトランジェクションというCSSから状態の変化に応じたアニメーションを制御できるものがあって、Vue.jsでももちろん利用できる。利用したいときはtransitionタグで囲む。

<transition name="fade">
  <p>トランジションさせたい要素</p>
</transition>

もちろんこのままだと、アニメーションしないのでCSSを指定してあげる必要がある。以下の状態がある。

v-enter: 要素が挿入されたときの状態
v-enter-active: 挿入中の状態
v-enter-to: 挿入が終わったときの状態
v-leave: 要素が削除されるときの状態
v-leave-active: 削除中の要素
v-leave-to: 削除が終わったときの状態

実際にスタイルを定義するときは上の'v'をtransitionタグに付けた名前を接頭語につけるといい。ない場合はv-をそのままつけるといい。

トランジションの内容はそこに書く。

.fade-enter-active {
  transition: opacity .5s;
}
.fade-enter {
  opacity: 0;
}

ちなみにここまで見たものをVue.jsではenter/leaveトランジションと呼んでいる。

appear属性を使うと初回描画時でもトランザクションを行えるようになる。

appear: 初回描画時のトランザクションを有効化する
appear-class: 指定したCSSクラスを使ってトランザクションを行う
appear-to-class
appear-active-class

もちろんJSの関数も設定できる。

v-on:before-appear
v-on:appear
v-on:after-appear
v-on:appear-cancelled

transitionタグ内のv-if、v-elseとかを使ったタグの切り替え時でもトランザクションは行える。 transitionタグの中に切り替わるタグがあるなら各々にkey属性を付けることを推奨している。

トランジション時の振舞の指定

2つの要素が同時にイン/アウトするとき、デフォルトだと同時に処理される。場合によっては不自然に見えることもあるので、そのときはmode属性で振舞を変更できる。

in-out: 新しい要素のトランジションを先に処理し、終わったら現在の要素をトランジションする
out-in: in-outの反対

他のCSSフレームワークとの連携

Vue.jsではもちろん、ほかのCSSフレームワークを利用できる。そのときは以下の属性を指定してあげるといい。先頭のv-がなくなって、末尾に-classが追加された感じだ。

enter-class: 要素が挿入されたときの状態
enter-active-class: 挿入中の状態
enter-to-class: 挿入が終わったときの状態
leave-class: 要素が削除されるときの状態
leave-active-class: 削除中の要素
leave-to-class: 削除が終わったときの状態

Javascriptフック

トランザクションの状態に合わせてJavascriptの関数を呼び出すこともできる。以下、公式ガイドから。


<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
</transition>

<script>
// jsの関数とCSSトランザクションは組み合わせることができる。
// ただし、jsだけ使用したときはenterとleaveに設定した関数内でdoneコールバックを呼び出す必要がある。
methods: {
  // --------
  // ENTERING
  // --------
  beforeEnter: function (el) {
    // ...
  },
  // CSS と組み合わせて使う時、done コールバックはオプションです
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // LEAVING
  // --------
  beforeLeave: function (el) {
    // ...
  },
  // CSS と組み合わせて使う時、done コールバックはオプションです
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // v-show と共に使うときだけ leaveCancelled は有効です
  leaveCancelled: function (el) {
    // ...
  }
}
</script>

リストトランジション

v-forなど、リスト化された要素でトランジションを行いたいときはtransition-groupタグを使う。ただし、以下の制約がある。

デフォルトでは子要素はspanタグとして扱われる。(tag属性で切り替え可能)
v-moveは使えない
中の要素は必ずkey属性を持たせないといけない。
内部ではFLIPを使っているため、スタイルにdisplay: inlineが指定されていると動作しない

<style>
.list-item {
    display: inline-block;
    margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
//新しく要素が追加されたとき、他の要素をアニメーションさせるときに使う。(v-move)
.list-move {
    transition: transform 1s;
}
</style>

<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
    {{ item }}
</span>
</transition-group>

ちなみにdata属性とdelay機能を組み合わせることで、アニメーションのタイミングをズラすことができる。

Vueコンポーネントでのトランジション

Vueコンポーネント内でtransition、transition-groupを使うときはルート要素に配置しないといけない。

最後にガイドにあった文章を引用する

動的なトランジションを作成する究極の方法は、プロパティでトランジションの性質を変えながら試行錯誤することです。小さく聞こえるかもしれませんが、本当の限界はあなたの想像力だけなのです。

XXとしてる

2019年1月3日木曜日

Vue.js その3