logo

该视频仅会员有权观看

立即开通课程「Vue.js前端应用开发实践」权限。

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