VueJS Framework - Transitioning State and Render Function

Sau một vài bài viết giới thiệu các tính năng của VueJS Framwork thì hôm nay mình xin giới thiệu với các bạn thêm tính năng Transitioning State và Renderer Function.

Như bài trước mình đã giới thiệu về tính năng Transition Effects là 1 tính năng hoàn hảo dành cho những ai muốn customize lại animate trên pages của mình,nó hỗ trợ tối đa các lib third-party về css và js và đã build thành 1 feature hoàn thiện dành cho dev và ngoài ra thì VueJS còn có thêm 1 tính năng để cho các Element trên DOM có thể linh hoạt hơn, sống động hơn thay vì chỉ bind và render lại trên DOM bằng JQuery.Và đó chính là Transitioning State.

Hệ thống Transition của Vuejs đã cung cấp rất nhiều cách để xử lý các sư kiện như là entering,leaving và lists,nhưng chúng ta cần phải biết là animating nào để xử lý cho actions đó để pages trở nên chuyên nghiệp hơn.1 vài ví dụ về các animation hay gặp :

1. Numbers and calculations
2. Colors displayed.
3. The size and other properties of elements.

Chúng ta có thể làm động các state khi có thay đổi bằng việc sử dụng 3rd-party libs giữa các state,kết hợp với các thành phần trong hệ thống.

Animating State with Watchers

Watchers object cho phép chúng ta thay đổi bất kỳ thuộc tính nào bằng số vào trong các thuộc tính khác 1 cách sinh động,điều này nghe thì có vẻ như là rất phức tạp và hơi trừu tượng nên mình sẽ có 1 demo nhỏ sau với việc sử dụng thêm 1 3rd-party là Tween.js :

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/tween.js@16.3.4"></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,
    animatedNumber: 0
  },
  watch: {
    number: function(newValue, oldValue) {
      var vm = this
      function animate (time) {
        requestAnimationFrame(animate)
        TWEEN.update(time)
      }
      new TWEEN.Tween({ tweeningNumber: oldValue })
        .easing(TWEEN.Easing.Quadratic.Out)
        .to({ tweeningNumber: newValue }, 500)
        .onUpdate(function () {
          vm.animatedNumber = this.tweeningNumber.toFixed(0)
        })
        .start()
      animate()
    }
  }
})

Example is here

Ở ví dụ trên,khi chúng ta thay đổi number thì sự thay đổi đó sẽ được animate (thể hiện lại bằng cách sinh động hơn cho user) tại input ở bên dưới.Đó là 1 ví dụ về việc sử dụng Tween.js libs để thể hiện rõ 1 animate khi thay đổi số,chúng ta sẽ cùng xem thêm ví dụ về 1 action mà thường xảy ra hơn đó là về sự thay đổi color của elements :

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/tween.js@16.3.4"></script>
<script src="https://unpkg.com/color-js@1.0.3/color.js"></script>
<div id="example-7">
  <input
    v-model="colorQuery"
    v-on:keyup.enter="updateColor"
    placeholder="Enter a color"
  >
  <button v-on:click="updateColor">Update</button>
  <p>Preview:</p>
  <span
    v-bind:style="{ backgroundColor: tweenedCSSColor }"
    class="example-7-color-preview"
  ></span>
  <p>{{ tweenedCSSColor }}</p>
</div>

var Color = net.brehaut.Color
new Vue({
  el: '#example-7',
  data: {
    colorQuery: ',
    color: {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    },
    tweenedColor: {}
  },
  created: function () {
    this.tweenedColor = Object.assign({}, this.color)
  },
  watch: {
    color: function () {
      function animate (time) {
        requestAnimationFrame(animate)
        TWEEN.update(time)
      }
      new TWEEN.Tween(this.tweenedColor)
        .to(this.color, 750)
        .start()
      animate()
    }
  },
  computed: {
    tweenedCSSColor: function () {
      return new Color({
        red: this.tweenedColor.red,
        green: this.tweenedColor.green,
        blue: this.tweenedColor.blue,
        alpha: this.tweenedColor.alpha
      }).toCSS()
    }
  },
  methods: {
    updateColor: function () {
      this.color = new Color(this.colorQuery).toRGB()
      this.colorQuery = '
    }
  }
})

.example-7-color-preview {
  display: inline-block;
  awidth: 50px;
  height: 50px;
}

Example is here

1 điều đặc biệt trong demo nhỏ ở trên như chúng ta đã thấy là color của element sẽ thay đổi ngay khi chúng ta thay đổi text về bất kỳ 1 color nào,thật thú vị cho các web-site mà được hoàn thiện UI với các tính năng mà Vuejs cung cấp phải không nào