在项目components 文件夹的ch5子文件夹中,添加一个名为“GsapAnimate”的.vue文件,在文件中加入如清单5-5所示代码。
代码清单5-5 GsapAnimate.vue代码
<template>
<div class="action">
<div class="act">
<input type="button" @click="increment()"
value="动画数字">
</div>
<div class="change">{{ counter.toFixed(0) }}</div>
</div>
</template>
<script>
import gsap from 'gsap'
export default {
name: "GsapAnimate",
data() {
return {
counter: 0
};
},
methods: {
increment() {
gsap.to(this,
{ duration: 2, counter: this.counter + 100 }
)
}
},
};
</script>
<style>
.action .act {
margin: 10px 0;
}
.action .change{
font-size: 30px;
font-weight: 700;
font-family:'微软雅黑'
}
</style>