Petunjuk

Transisi State

Terdapat banyak cara sederhana pada sistem transisi Vue untuk animasi masuk, keluar dan daftar, tetapi bagaimana dengan menganimasi data Anda sendiri? Sebagai contoh:

Semuanya ini bisa saja sudah disimpan sebagai angka mentah (raw number) atau belum dikonversi menjadi angka. Ketika kita melakukan hal itu, kita dapat menganimasi perubahan state ini menggunakan pustaka pihak ketiga menjadi tween state, dalam kombinasi dengan reaktivitas Vue dan sistem komponennya.

Menganimasi State Menggunakan Watcher

Dengan menggunakan watcher, kita dapat menganimasi perubahan dari properti numerik apapun menjadi properti lain. Hal tersebut terkesan rumit untuk dibayangkan, jadi mari kita pahami contoh berikut menggunakan GreenSock:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

<div id="animated-number-demo">
  <input v-model.number="number" type="number" step="20">
  <p>{{ animatedNumber }}</p>
</div>
new Vue({
  el: '#animated-number-demo',
  data: {
    number: 0,
    tweenedNumber: 0
  },
  computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0);
    }
  },
  watch: {
    number: function(newValue) {
      TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
    }
  }
})