Vue 组件里的一些数字类型的数据从一个值变成另一个值的时候，中间也可以加上点过渡效果。先安装一个东西，在终端，新建一个标签，在项目所在目录的下面，可以执行 yarn add 安装 gsap，它是一个做动画用的东西。

回到项目，打开 App 组件 ，先在组件里可以导入刚才安装的 gsap ，来自 gsap 这个包。 然后我们在这个组件的 data 里面，先添加一个数据叫 number，让它的值等于 0，再添加一个 tweenedNumber，也让它等于 0。

下面可以再添加一个计算属性，放在 computed 里面，名字可以是 animatedNumber，它的值是 this.tweenedNumber ，再调用一下 toFixed ，小数位设置成 0 。

再添加一个 watch ，要监视的数据可以放在这里，比如我们要监视一下 number 这个数据的变化，一个 newValue 参数，它的值就是 number 这个数据变化之后的值。

里面用一下 gsap 上面提供的 to ，把数据交给这个方法的第一个参数，这里可以用一下 this.$data ，这个 $data 就是当前这个组件里的数据。后面再提供一些参数，一个对象，先用 duration 设置一下动画时长，比如 0.5 秒。 然后设置一下 tweenedNumber ，让它等于 number 变化之后的值，这里就是 newValue。

在组件的模板里面，找个地方用一下 animtedNumber，一组 div 上面加上 emoji 这个类，里面绑定输出 animatedNumber。

然后再处理一下按钮，去掉一个按钮，只留下一个，在这个按钮元素上发生点击事件，可以设置一下 number 的值，让它等于 number 加上 10 。

在回到浏览器可以测试一下，点一下按钮，你会发现从数字 0 到数字 10 ，中间会补上一些数字。这个就是 gsap 提供的功能。