vue3 gsap 基于侦听器的动画

1、gsap实现动画 https://gsap.com/

.以上来自baidu ai

2、代码：

安装gsap：pnpm install gsap

<script setup>
import { ref, reactive, watch } from 'vue'
import gsap from 'gsap'

const number = ref(0)
const tweened = reactive({
  number: 0
})

watch(
  number,
  (n) => {
    gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 })
  }
)
</script>

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

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

3、gsap使用简单，功能强大。gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 })