【vue3】状态过渡-GSAP插件实现

本文主要是介绍【vue3】状态过渡-GSAP插件实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图：

实现代码

安装库：npm install --save-dev gsap
引入：import gsap from 'gsap'

<template><div><el-input v-model="num.currNum" type="number" step="20" style="width: 120px;"></el-input><div>{{ num?.tweenNum.toFixed(0) }}</div></div></template><script setup lang='ts'>import { reactive,watch } from 'vue'import gsap from 'gsap'let num = reactive({currNum:0,tweenNum:0})watch(()=>num.currNum,(newVal)=>{gsap.to(num,{duration:1,tweenNum:newVal})})</script><style scoped lang='scss'></style>

这篇关于【vue3】状态过渡-GSAP插件实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---