【学習メモ】動かして学ぶ！Vue.js 開発入門 その8

Chapter10 アニメーションするとき

01 表示／非表示時にアニメーションする：transition

表示／非表示時にアニメーションするときは、transition

CSSスタイル

要素が現れるとき

• .v-enter：現れる前の状態
• .v-enter-active：現れている最中
• .v-enter-to：現れたときの状態

要素が消えるとき

• .v-leave：現れる前の状態
• .v-leave-active：現れている最中
• .v-leave-to：現れたときの状態

要素が移動するとき

• .v-move：要素が移動するとき

例

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

チェックボックスで表示／非表示をアニメーションする

<div id="app">
  <!-- チェックボックスで表示／非表示をアニメーションする -->
  <label><input type="checkbox" v-model="isOK">切り替える</label>
  <transition>
    <p v-if="isOK">表示、非表示のアニメ</p>
  </transition>
</div>

new Vue({
  el: "#app",
  data: {
    isOK: false
  }
});

/* チェックボックスで表示／非表示をアニメーションする */
/* 現れている最中と、消えている最中は0.5秒 */
.v-enter-active,
.v-leave-active {
  transition: 0.5s;
}
/* 現れる前の状態と、消えたときの状態は、透明度0で下へ10px移動 */
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

結果

02 リストのトランジション：transition-group

ボタンを押してリストが増減するとき、アニメーションする

  <div id="app">
    <!-- ボタンを押してリストが増減するとき、アニメーションする -->
    <transition-group>
      <li v-for="item in dataArray" v-bind:key="item">{{ item }}</li>
    </transition-group>
    <label><input v-model="addItem" placeholder="追加するリスト"></label>
    <button v-on:click="addList">追加</button>
    <button v-on:click="removeLast">最後の1つを削除</button>
  </div>

new Vue({
  el: "#app",
  data: {
    dataArray: ['Hanako', 'Ichiro', 'Tomoko'],
    addItem: ''
  },
  methods: {
    addList: function () {
      this.dataArray.push(this.addItem);
      this.addItem = '';
    },
    removeLast: function () {
      const lastIndex = this.dataArray.length - 1;
      this.dataArray.splice(lastIndex, 1);
    }
  }
});

/* ボタンを押してリストが増減するとき、アニメーションする */
/* 現れている最中と、消えている最中は0.5秒 */
.v-enter-active,
.v-leave-active {
  transition: 0.5s;
}
/* 現れる前の状態と、消えたときの状態は、透明度0で右へ50px移動 */
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(50px);
}

結果

03 リストの並びが移動するトランジション

クリックしたらシャッフルする

  <div id="app">
    <!-- ボタンを押してリストが増減するとき、アニメーションする -->
    <transition-group>
      <li v-for="item in dataArray" v-bind:key="item">{{ item }}</li>
    </transition-group>
    <button v-on:click="sortData">ソートする</button>
    <button v-on:click="shuffleData">シャッフルする</button>
  </div>

new Vue({
  el: "#app",
  data: {
    dataArray: ['one', 'two', 'three', 'four', 'five']
  },
  methods: {
    sortData: function () {
      this.dataArray.sort(function (a, b) {
        if (a < b) return -1;
        if (a > b) return 1;
        return 0;
      });
    },
    shuffleData: function () {
      var buffer = [];
      var len = this.dataArray.length;
      for (let i = 0; len > 0; len--) {
        var r = Math.floor(Math.random() * len);
        buffer.push(this.dataArray[r]);
        this.dataArray.splice(r, 1);
      }
      this.dataArray = buffer;
    }
  }
});

/* 移動トランジションにかか秒数 */
.v-move {
  transition: 0.25s;
}

結果