zqy233的前端学习笔记 | zqy233的前端学习笔记

gsap.to(targets,vars)：从开始的位置到结束的位置

targets - 你需要添加动画的对象，可以是object,array和选择器".myClass"
vars - 一个对象，里面包含你想要改变的属性，延时，已经回调函数等

vue

<script>
import gsap from 'gsap'

export default {
  data() {
    return {
      number: 0,
      tweened: 0
    }
  },
  watch: {
    number(n) {
      // 更改this中的tweened属性
      gsap.to(this, { duration: 0.5, tweened: Number(n) || 0 })
    }
  }
}
</script>

<template>
	Type a number: <input v-model.number="number" />
	<p class="big-number">{{ tweened.toFixed(0) }}</p>
</template>

<style>
.big-number {
  font-weight: bold;
  font-size: 2em;
}
</style>

<script>
import gsap from 'gsap'

export default {
  data() {
    return {
      number: 0,
      tweened: 0
    }
  },
  watch: {
    number(n) {
      // 更改this中的tweened属性
      gsap.to(this, { duration: 0.5, tweened: Number(n) || 0 })
    }
  }
}
</script>

<template>
	Type a number: <input v-model.number="number" />
	<p class="big-number">{{ tweened.toFixed(0) }}</p>
</template>

<style>
.big-number {
  font-weight: bold;
  font-size: 2em;
}
</style>