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

news2024/11/15 23:22:15

效果图:

在这里插入图片描述

实现代码

安装库: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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1131228.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于多尺度分形残差注意力网络的超分辨率重建算法

1.引言 深度神经网络可以显著提高超分辨率的质量&#xff0c;但现有方法难以充分利用低分辨率尺度特征和通道信息&#xff0c;从而阻碍了卷积神经网络的表达能力。针对此类问题&#xff0c;本章提出了一种多尺度分形残差注意力网络&#xff08;Multi-scale Fractal Residual A…

js快速回顾

组成 书写位置 声明 ![在这里插入图片描述](https://img-blog.csdnimg.cn/83e92ae533714d5bb45d0cbb00d19e20.png)数据类型

【HyperQuest】调参

1 前言 平台网址链接 平台介绍&#xff1a;这是一个网络应用程序&#xff0c;专门为机器学习的初学者设计&#xff0c;可以轻松地通过直觉来选择正确的超参数。 以此篇文章记录我的调参结果和个人总结&#xff0c;如果大家有更好的效果&#xff0c;欢迎留言交流~ 2 调参思路 …

C语言行列式转置

#include<stdio.h> void main() {int a[3][4] { {1,2,3},{4,5,6},{7,8,9} };int b[4][3] {0};int zf sizeof(a) / sizeof(a[0][0]);//总长int row_len sizeof(a) / sizeof(a[0]);//行数int col_len zf / row_len;//列数int i, j, k0,count0;for (i 0; i <row_le…

福建三明大型工程机械3D扫描测量工程零件开模加工逆向抄数-CASAIM中科广电

高精度3D扫描测量技术已经在大型工件制造领域发挥着重要作用&#xff0c;可以高精度高效率实现全尺寸三维测量&#xff0c;本期&#xff0c;CASAIM要分享的应用是大型工程机械3D扫描测量案例。 铣轮是深基础施工领域内工法先进、技术复杂程度高、高附加值的地连墙设备&#xff…

【万字长文】基于阿里云PAI平台搭建知识库检索增强的大模型对话系统

作者&#xff1a;施晨、尹丰彬、张晓雯、李林杨、黄俊 等 写在前面 本方案已在阿里云线上多个场景落地&#xff0c;将覆盖阿里云官方答疑群聊、研发答疑机器人、钉钉技术服务助手等。线上工单拦截率提升10%&#xff0c;答疑采纳率70%&#xff0c;显著提升答疑效率。 本方案…

onebound电商API接口商品数据采集平台:让数据成为生产力!

随着数字化商业时代的到来&#xff0c;API接口已成为电商资源连接利器&#xff0c;也是全球传统互联网企业转型的基础。 2021年 Google Cloud 研究显示&#xff0c;全球互联网企业近3/4的企业持续投入数字化转型&#xff0c;2/3的企业在持续增加投入&#xff0c;从这组数据可以…

内裤洗衣机有用吗?最好用的四款内衣洗衣机测评

相信很多小伙伴往往会因为懒而不想洗内衣&#xff0c;又或者洗内衣时经常会洗不干净&#xff01;这时就很有必要入手一台内衣洗衣机了&#xff0c;当我们洗完澡时&#xff0c;顺手把内衣放入洗衣机内&#xff0c;一键启动即可把我们的内衣洗得干干净净&#xff01;同时还可以为…

企业财务数字化转型怎么才能落地?_光点科技

企业财务数字化转型一直是企业发展中的一个重要议题。在当今数字化的时代&#xff0c;将财务流程纳入数字化转型计划中&#xff0c;不仅能够提高工作效率&#xff0c;还能为企业带来更多的商业机会。那么&#xff0c;企业财务数字化转型如何才能真正落地呢&#xff1f; 企业需要…

Postman环境配置

Postman环境配置 安装Postman安装node.js安装newman安装htmlextra安装git注册163邮箱用163邮箱注册gitee在pycharm中安装gitee详细文档 安装Postman 网址&#xff1a;https://www.postman.com/downloads/ 注册一个账号即可 安装node.js 安装newman npm install -g newman …

【2021集创赛】Arm杯三等奖:基于FPGA的人脸检测SoC设计

本作品参与极术社区组织的有奖征集|秀出你的集创赛作品风采,免费电子产品等你拿~活动。 团队介绍 参赛单位&#xff1a;合肥工业大学 队伍名称&#xff1a;芯创之家 指导老师&#xff1a;邓红辉、尹勇生 参赛杯赛&#xff1a;Arm杯 参赛人员&#xff1a;王亮 李嘉燊 金京 获奖情…

Cn2线路异常采用Nginx反代灾备解决方案

香港机房因出口带宽较小&#xff0c;抗攻击能力相对 较差。这是绝大部分香港机房的通病。CN2的稳定性要好一些&#xff0c;163线路价格相对便宜&#xff0c;稳定性较CN2要差一些。在受到扫段攻击&#xff08; https://anquan.baidu.com/article/1343 &#xff09;等特殊情况下&…

ASO优化之我们该如何本地化应用

ASO优化涉及优化各种元素&#xff0c;包括应用标题、关键词、描述、屏幕截图和预览视频&#xff0c;能够提高应用的排名、吸引相关用户并最大限度地提高特定区域内的下载量。在竞争激烈的应用商店中&#xff0c;本地化是确保应用成功的关键因素&#xff0c;首先是了解目标受众的…

C++:哈希

目录 一、unordered系列关联容器 二、底层的结构 哈希结构 哈希冲突/哈希碰撞 ①、闭散列 —> 开放定址法 闭散列的模拟实现 ②、开散列 —> 拉链法/哈希桶 哈希桶的模拟实现 三、哈希应用 位图 位图的特点 位图的模拟实现 布隆过滤器 布隆过滤器的模拟实现…

ubuntu 安装串口工具和添加虚拟串口

目录 一、串口工具安装 二、使用Windows本身虚拟的串口 &#xff08;一&#xff09;添加串口 1、保证虚拟机是关闭状态&#xff0c;打开“虚拟机设置”&#xff0c;点击“添加”。 2、选中“串行端口”&#xff0c;点击“完成”。 3、选中刚添加的串口&#xff0c;下拉选…

XXXSpringMVC“框架的简单创建与使用,快速上手;

前言 【描述】 " 【环境】 系统"Windows"&#xff0c;软件"IntelliJ IDEA 2021.1.3(Ultimate Edition)"&#xff1b;“Java版本"1.8.0_202”&#xff0c;“Spring"版本"2.5.9”&#xff1b; 实操 【实操1】 说明 【描述】 创建&quo…

大学生学习新途径:视频号视频下载助你获取学术资源

​在这个信息爆炸的时代&#xff0c;大学生们为了获取更多的学术资源常常面临诸多挑战。然而&#xff0c;随着互联网的发展&#xff0c;视频号平台逐渐成为了学生们学习的新途径。本文将介绍如何通过视频号视频下载来获取学术资源&#xff0c;帮助大学生们更好地学习。 1. 视频…

测试内容总结

目录 面试题类型 测试用例 非软件题型 软件类型 代码题型 关于个人的项目设计测试类型 万能公式 自动化面试 什么是自动化以及为什么要做 selenium驱动浏览器的工作原理 设计自动化测试的思路(个人的自动化亮点) 1、明确个人项目里哪些页面需要做web做自动化测试—…

FreeRTOS 消息队列 详解

目录 什么是队列&#xff1f; 消息队列特点 1. 数据入队出队方式 2. 数据传递方式 3. 多任务访问 4. 出队、入队阻塞 消息队列相关 API 函数 1. 创建队列 2. 写队列 3. 读队列 消息队列实操 什么是队列&#xff1f; 队列又称消息队列&#xff0c;是一种常用于任务间…

SpringBoot+SpringMVC+MybatisPlus

文章目录 SpringBootSpringMVCMybatisPlus怎样在SpringBoot中引入SpringMVC?首先看下引入的依赖创建数据库表创建DO类创建MyBatisPlus动态代理接口创建controller控制器接收http请求创建SpringBoot配置文件application.yml最后创建启动类 SpringBootSpringMVCMybatisPlus 怎样…