Vue前端开发:gsap动画库-2. 实现代码

在项目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>

上一篇:信号量和线程池


下一篇:tomcat与servlet版本对应关系