Vue.js transition template

by uto usui

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div id="app">
  <transition name="fade" mode="out-in">
    <button :key="show" class="button" id="button" @click="toggle">{{show ? 'leave' : 'enter'}}</button>
  </transition>
  <transition name="fade">
    <img v-show="show" src="https://source.unsplash.com/1600x900/?nature,water" alt="placeholder">
  </transition>
</div>

SCSS

// enter の活性状態。トランジションに入るフェーズ中に適用。
// 要素が挿入される前に追加され、トランジション/アニメーションが終了すると削除
// 期間、遅延、およびイージングカーブを定義
.fade-enter-active {
  // easeOutExpo
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}


// leave の活性状態。トランジションが終わるフェーズ中に適用
// leave トランジションがトリガされるとき、直ちに追加され、トランジション/アニメーションが終了すると削除
// 期間、遅延、およびイージングカーブを定義
.fade-leave-active {
  // easeInQuart
  transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

//  enter の開始状態。要素が挿入される前に適用され、要素が挿入された 1 フレーム後に削除
.fade-enter {
  opacity: 0;
  transform: translateX(-100%);
}

// leave の終了状態
// トランジションの終了がトリガされた後に (同時に v-leave 削除) 1フレーム追加
// トランジション/アニメーションが終了すると削除
.fade-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

Babel + JSX

const root = new Vue({
   
   data: function() {
     return {
       show: false
     }
   },
   
   methods: {
    toggle() {
      this.show = !this.show
    }
  },

});

root.$mount( '#app' );