トップ > Vue > トランジション機能を✅

トランジション機能を✅

Vue

玄関が汚い家に誰が入りたいと思う？と同居人に言われてアプリのデザイン改良に必死な23期中野昴です。オフラインもくもく会に参加してきました。こんな人なんだ！の連続で楽しかったです。

 

さて、今回はvueのトランジションについて学習していきたいと思います。

トランジションとは

次のコンテキストにある要素やコンポーネントに entering/leaving トランジションを追加することを可能にします:

booleanを切り替えるメソッドが発火された時にtransitionで囲まれた部分に対してアクションを起こす事ができます。

例えば、下記のコードは,Toggleというボタンを押すとhelloという文字が出現する仕組みになっています。

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

<script>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</script>

script内で使えわれているenterとleaveがtransitionにおける重要なファクターになります。

公式では以下のようにまとめられています。

  1. v-enter: enter の開始状態。要素が挿入される前に適用され、要素が挿入された 1 フレーム後に削除されます。
  2. v-enter-active: enter の活性状態。トランジションに入るフェーズ中に適用されます。要素が挿入される前に追加され、トランジション/アニメーションが終了すると削除されます。このクラスは、トランジションの開始に対して、期間、遅延、およびイージングカーブを定義するために使用できます。
  3. v-enter-to:  enter の終了状態。要素が挿入された 1 フレーム後に追加され (同時に v-enter が削除されます)、トランジション/アニメーションが終了すると削除されます。
  4. v-leave: leave の開始状態。トランジションの終了がトリガされるとき、直ちに追加され、1フレーム後に削除されます。
  5. v-leave-active: leave の活性状態。トランジションが終わるフェーズ中に適用されます。leave トランジションがトリガされるとき、直ちに追加され、トランジション/アニメーションが終了すると削除されます。このクラスは、トランジションの終了に対して、期間、遅延、およびイージングカーブを定義するために使用できます。
  6. v-leave-to:  leave の終了状態。leave トランジションがトリガされた 1 フレーム後に追加され (同時に v-leave が削除されます)、トランジション/アニメーションが終了すると削除されます。

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>
 <!-- ... -->
methods: {
  // --------
  // ENTERING
  // --------

  beforeEnter: function (el) {
    // ...
  },
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // LEAVING
  // --------

  beforeLeave: function (el) {
    // ...
  },
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  leaveCancelled: function (el) {
    // ...
  }
}

実際に使ってみる

before-enter ⇨ enter ⇨ leaveの順番で実行されています。

<transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
       <p class="text-h2 bold" v-if="show">ゼロケン</p>
  </transition>

<script>
< !---...--- >
data(){
return{
show: false,
}}
,
methods{
beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '1px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  ,
}

Image from Gyazo

Enter/Leave とトランジション一覧 - Vue.js

トランジション | Vue Router

vue-router/app.js at dev · vuejs/vue-router

Enter/Leave とトランジション一覧 - Vue.js