【学習メモ】基礎から学ぶ Vue.js その4

• 第 6 章 トランジションとアニメーション

基本的なトランジションの使い方

<div id="app">
  <button v-on:click="show=!show">切り替え</button>
  <transition><div v-show="show">トランジションする要素</div></transition>
</div>

.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}
.v-enter,
.v-leave-to {
  opacity: 0;
}

var app = new Vue({
  el: "#app",
  data: {
    show: true
  }
});

v-show ではなく v-if でも可能

<div id="app">
  <button v-on:click="show=!show">切り替え</button>
  <transition><div v-if="show">トランジションする要素</div></transition>
</div>

プレフィクスの変更

<div id="app">
  <button v-on:click="show=!show">切り替え</button>
  <transition name="hoge">
    <div v-if="show">トランジションする要素</div>
  </transition>
</div>

.hoge-enter-active,
.hoge-leave-active {
  transition: opacity 1s;
}
.hoge-enter,
.hoge-leave-to {
  opacity: 0;
}

初期描画時もアニメーションする appear属性

<div id="app">
  <transition appear>
    <div v-if="show">トランジションする要素</div>
  </transition>
</div>

キーの変化に反応してアニメーションする

<div id="app">
  <button v-on:click="count++">+1する</button>
  <transition mode="out-in">
    <div v-bind:key="count">{{ count }}</div>
  </transition>
</div>

.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}
.v-enter,
.v-leave-to {
  opacity: 0;
}

var app = new Vue({
  el: "#app",
  data: {
    count: 0
  }
});

リストトランジション

<div id="app">
  <button v-on:click="order=!order">並び替え・変更</button>
  <transition-group tag="ul" class="list">
    <li v-for="item in sortedList" v-bind:key="item.id">
      {{ item.name }} {{ item.price }}円
    </li>
  </transition-group>
</div>

.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-move {
  transition: transform 1s;
}

var app = new Vue({
  el: "#app",
  data: {
    order: false,
    list: [
      { id: 1, name: "りんご", price: 100 },
      { id: 2, name: "ばなな", price: 200 },
      { id: 3, name: "いちご", price: 300 }
    ]
  },
  computed: {
    // orderの値でリストの順番を反転する算出プロパティ
    sortedList: function() {
      // LodashのorderByメソッドを使用
      return _.orderBy(this.list, "price", this.order ? "desc" : "asc");
    }
  }
});