
Camila Waz
发布于
2020-11-04 14:40:21
vue项目使用gsap插件使数字递增动画效果
上一篇文章:
Git常用命令及方法大全
下一篇文章:
vue特定页面中需jQuery时页面引用方式
使用方法一:
1、npm install gsap
2、在使用页面中import gsap from "gsap";
1、npm install gsap
1、npm install gsap
2、在使用页面中import gsap from "gsap";
<template> <div>{{ animatedNumber }}</div> </template> <script> import gsap from "gsap"; export default { data () { return { number: 0, tweenedNumber: 0 } }, computed: { animatedNumber: function() { return this.tweenedNumber.toFixed(0); } }, created(){ gsap.to(this.$data, { duration: 0.5, tweenedNumber: 666666 }); }, } </script>使用方法二:
1、npm install gsap
2、main.js中import gsap from "gsap";
Vue.prototype.gsap = gsap;
<template> <div>{{ animatedNumber }}</div> </template> <script> export default { data () { return { number: 0, tweenedNumber: 0 } }, computed: { animatedNumber: function() { return this.tweenedNumber.toFixed(0); } }, created(){ this.gsap.to(this.$data, { duration: 0.5, tweenedNumber: 80 }); }, } </script>
最后生成于 2020-12-28 15:08:06
上一篇文章:
Git常用命令及方法大全
下一篇文章: