Simplify examples code in the 'Transitioning State' topic

[iurii-kyrylenko]

@chrisvfritz

In my opinion, three examples based on tween.js (animated number, animated color and transition in component) could be simplified by excluding stuff, related to the AnimationFrame (just like in the svg animation).

A refactored version of the animated number (see also this fiddle):

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 });
    }
  }
})

[chrisvfritz]

Hmm, I'll think about this. At the very least, I don't want to include GSAP for every example, for a few reasons:

• It's not free for all uses.
• If an application is not already using GSAP and doesn't want to switch, it does a lot for you that they might not realize.

[sdras]

I'm clearly a fan of GSAP over here, but mainly I'm a fan of clarity. Personally, I think since the base of TweenMax is open source, and it solved a lot of cross browser inconsistency woes, I'd love to refactor to this example. BUT if you're still not sold on GSAP, we could update it to anime.js. I mainly think the point is an extremely valid one because a core tenant of Vue is legibility, and using tween.js makes the examples more convoluted than they should be for people trying to learn.

[chrisvfritz]

@sdras You've spent a lot more time (and do a better job) teaching animation than I do, so I'll defer to you on this one. 🙂 PR welcome!

[sdras]

Eggggsellent. Thanks Chris! Will do.

[sdras]

Done! Thanks. I'll try to get the other color one in later if I have time, but it might be nice to keep it the way it is to show two different libraries and how they work with watchers. That first example is nice and small so people can extend it as they wish.