- 在vivo组件中,数字数据在变化时,可以加上过渡效果。
- 安装GSAP(GreenSock Animation Platform)库,
yarn add gsap
。 - 在组件的
data
中添加名为number
的数据,初始值为0。 - 更新时添加名为
twentNumber
和animisticNumber
的数据,其中animisticNumber
是计算属性,并设定其依赖于twentNumber
。 - 通过GSAP的
to
方法添加监视器来实现动画效果,监视number
数据的变化,并应用动画过渡。 - 在组件模板中使用
animatedNumber
。 - 调整按钮使其点击后能更新
number
的值,并在浏览器中查看从0到10的动画效果。