Vue.js トランジション JavaScriptフック サンプル

[v-cloak] {
  display: none;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}
.v-enter,
.v-leave-to {
  opacity: 0;
}

<div id="app" v-cloak>
  <p>
    <button @click="show=!show">切り替え</button>
    <button @click="cancel" :disabled="!anime">キャンセル</button>
    <span v-if="anime">アニメーション中</span>
  </p>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @enter-cancelled="enterCancelled"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    @leave-cancelled="leaveCancelled">
    <div v-if="show">Hello World!</div>
  </transition>
</div>

new Vue({
  el: '#app',
  data: {
    show: true,
    anime: false
  },
  methods: {
    beforeEnter(el) {
      console.log('before-enter');
    },
    enter(el) {
      console.log('enter');
      el.style.color = 'red';
      this.anime = true;
    },
    afterEnter(el) {
      console.log('after-enter');
      this.anime = false;
    },
    enterCancelled(el) {
      console.log('enter-cancelled');
      this.anime = false;
    },
    beforeLeave(el) {
      console.log('before-leave');
    },
    leave(el) {
      console.log('leave');
      this.anime = true;
    },
    afterLeave(el) {
      console.log('after-leave');
      this.anime = false;
    },
    leaveCancelled(el) {
      console.log('leave-cancelled');
      this.anime = false;
    },
    cancel() {
      console.log('cancel');
      this.show = false;
    }
  }
});

元記事に戻る