vuejs3用gsap实现动画

效果

vuejs3使用gsap刷新页面动态加载数字.gif

gsap官网地址:

https://gsap.com/

安装gsap

npm i gsap

创建Gsap.vue文件

<script setup>
import {reactive, watch} from "vue";
import gsap from "gsap";
const props = defineProps({
  value:{
    type:Number,
    default:0
  }
})
const data = reactive({
  num:0
})
//定义数字动画
const NumAnimate = () => {
  gsap.to(data,{
    duration:0.5, //持续时间
    num:props.value
  })
}
NumAnimate()
watch(() => props.value,() => NumAnimate())
</script>

<template>
<div>
  {{data.num.toFixed(0)}}
</div>
</template>

<style scoped lang="less">

</style>

使用gsap.vue里定义的动画

在其他组件里使用

<script setup>
//引入定义的动画组件
import Gsap from '@/components/Gsap.vue'
</script>



<template>
    <div class="t_main">
         <!--使用定义的动画组件 把要动画的值传进去-->
         <Gsap :value="item.value"></Gsap>
    </div>
</template>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

多线程思维导图

多线程 线程是一个程序内部的一条执行流程 多线程的好处————消息通信&#xff0c;网页浏览等等 多线程是指从软硬件上实现多条执行流程的技术 并发和并行同时执行 多线程的创建 Java.Long包下的Thread类 定义一个子类…

RT-Thread使用HAL库实现双线程控制LED交替闪烁

如何创建工程我的其他文中你面有可以进去查看 1创建线程&#xff08;以动态方式实现&#xff09; 1-2创建函数入口 1-2启动函数 main.c文件源码 /** Copyright (c) 2006-2024, RT-Thread Development Team** SPDX-License-Identifier: Apache-2.0** Change Logs:* Date …

自动驾驶技术综述:附自动驾驶公司一览表

前言 自动驾驶技术是一项复杂的系统工程&#xff0c;涵盖了众多技术领域。本文将从硬件和软件两个方面&#xff0c;详细介绍自动驾驶汽车涉及的关键技术&#xff0c;希望能为您提供有益的参考。 一、硬件 自动驾驶汽车的实现离不开各种硬件的支持。以下是一张自动驾驶研究所…

【LeetCode 274】H指数

1. 题目 2. 分析 这题没啥难度&#xff0c;需要熟练运用Python API。 sort(reverseTrue)可以用于排序List&#xff0c;并且倒序排序。 3. 代码 class Solution:def hIndex(self, citations: List[int]) -> int:citations.sort(reverseTrue)res 0for idx,cite in enume…

CentOS7环境脚本一键安装MySQL8

安装包准备 获取下载地址 选择对应的下载版本&#xff0c;如下图&#xff0c;右键RPM Bundle的Download&#xff0c;复制下载链接地址 下载安装包 [hadoopnode3 installfile]$ wget https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.31-1.el7.x86_64.rpm-bund…

【Docker项目实战篇】Docker部署PDF多功能工具Stirling-PDF

【Docker项目实战篇】Docker部署PDF多功能工具Stirling-PDF 前言一、Stirling-PDF介绍1.1 Stirling-PDF简介1.2 Stirling-PDF功能 二、本次实践规划2.1 本地环境规划2.2 本次实践介绍 三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本 四…

游戏AI的创造思路-技术基础-sigmoid函数详解

在前面的机器学习和深度学习的内容中&#xff0c;大量出现了sigmoid函数&#xff0c;所以本篇为大家介绍下sigmoid函数&#xff0c;希望对大家理解前面的算法和后面的Transformer有所帮助 目录 3.8. sigmoid函数 3.8.1. 定义 3.8.2. 性质 3.8.3. 应用 3.8.4. 缺点 3.8.5.…

php,python AES/CBC/PKCS7Padding加密解密 base64/hex编码

1. python版本 import base64 from Crypto.Cipher import AES from Crypto.Util.Padding import pad, unpadclass AESUtilCBC:def __init__(self, key, iv):self.key key.encode(utf-8)self.iv iv.encode(utf-8)self.pad_length AES.block_sizedef encrypt(self, data):try…

JVM专题十一:JVM 中的收集器一

上一篇JVM专题十&#xff1a;JVM中的垃圾回收机制专题中&#xff0c;我们主要介绍了Java的垃圾机制&#xff0c;包括垃圾回收基本概念&#xff0c;重点介绍了垃圾回收机制中自动内存管理与垃圾收集算法。如果说收集算法是内存回收的方法论&#xff0c;那么垃圾收集器就是内存回…

Python代码打包成exe应用

目录 一、前期准备 二、Pyinstaller打包步骤 Pyinstaller参数详解 三、测试 Spec 文件相关命令 一、前期准备 &#xff08;1&#xff09;首先&#xff0c;我们需要确保你的代码可以在本地电脑上的pycharm正常运行成功。 &#xff08;2&#xff09;我们要先安装Pyinstalle…

Epic登录转圈/Epic登录不上一直转圈的五种办法分享

Epic Games&#xff08;Epic商店&#xff09;是Epic旗下的数字游戏综合平台&#xff0c;不仅游戏数量众多&#xff0c;还可以每周在上面免费领取各种类型的热门游戏&#xff0c;深受国内游戏玩家追捧。不少玩家反馈在登录epic账号时会遇到转圈圈的情况&#xff0c;一直无法登录…

cs与msf权限传递,与mimikatz抓取win2012明文密码

CS与MSF的权限互相传递抓取windows2012的明文密码 CS与MSF的权限互相传递 1、启动cs服务端 2、客户端连接 3、配置监听&#xff0c;并设置监听端口为9999 4、生成脚本 5、开启服务&#xff0c;下载并运行木马 已获取权限 6、进入msf并设置监听 7、cs新建监听&#xff0c;与m…

python-docx 设置页面边距、页眉页脚高度

本文目录 前言一、docx 页面边距在哪里二、对 <w:pgMar> 的详细说明1、上边距的说明2、右边距的说明3、下边距的说明4、左边距的说明5、页眉高度的说明6、页脚高度的说明三、设置 docx 页边距、页眉页脚高度1、完整代码2、代码执行效果图四、补充一些内容1、页面边距的两…

`THREE.PointsMaterial` 是 Three.js 中用于创建粒子系统材质的类。它允许你设置粒子系统的外观属性,比如颜色、大小和透明度。

demo案例 THREE.PointsMaterial 是 Three.js 中用于创建粒子系统材质的类。它允许你设置粒子系统的外观属性&#xff0c;比如颜色、大小和透明度。下面是对其构造函数的参数、属性和方法的详细讲解。 构造函数 const material new THREE.PointsMaterial(parameters);参数&am…

浏览器扩展V3开发系列之 chrome.commands 快捷键的用法和案例

【作者主页】&#xff1a;小鱼神1024 【擅长领域】&#xff1a;JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等 chrome.commands API 允许开发者使用快捷键来执行特定的命令。 在使用 chrome.commands API 之前必须…

C# 入门—实现 Hello, World!

目录 一、.net 平台 二、.net 都能干什么&#xff1f; 三、.net 两种交互模式 四、使用 VS Code 开发 C# 程序 五、实现 Hello, World! 一、.net 平台 下载 .NET(Linux、macOS 和 Windows) (microsoft.com) .NET 简介 - .NET | Microsoft Learn C# :一种编程语言,可以开…

文件管理—linux(基础IO)

目录 ​编辑 一、C语言文件接口&#xff08;库函数&#xff09; hello.c写文件 hello.c读文件 输出信息到显示器 stdin & stdout & stderr 二、系统文件I/O&#xff08;系统调用&#xff09; hello.c 写文件&#xff1a; hello.c读文件 接口介绍 open open…

MQTT服务器/MQTT_C#客户端/Websoket连MQTT

MQTT(消息队列遥测传输)是ISO 标准(ISO/IEC PRF 20922)下基于发布/订阅范式的消息协议。它工作在 TCP/IP协议族上,是为硬件性能低下的远程设备以及网络状况糟糕的情况下而设计的发布/订阅型消息协议,为此,它需要一个消息中间件 。 MQTT是一个基于客户端-服务器的消息发布/订…

ue 材质贴图Tiling repeat

材质问题&#xff0c;如下 贴图显然不符合逻辑&#xff0c;太大&#xff0c;并且是一次性贴图 换一个红砖纹理&#xff0c;就看清了&#xff0c;砖太大了 修改&#xff1a; 拖出一个TexCoord&#xff0c;代表坐标&#xff0c;拖出一个参数&#xff0c;代表次数&#xff0c;如…

Python数据分析之-Oracle数据库连接

文章目录 cx_Oracle 介绍cx_Oracle运行原理cx_Oracle 安装linux环境安装windows环境安装 cx_Oracle 使用单独使用结合Pandas使用 参考资料 cx_Oracle 介绍 cx_Oracle 8是一个Python扩展模块&#xff0c;它提供了对Oracle数据库的访问能力。以下是cx_Oracle 8的一些关键特性和功…