【vue3】GSAP在vue中的使用

一、获取GSAP

npm install gsap

二、开始GSAP

导入GSAP,如果需要导入gsap的插件可以参考这里。

import gasp  from 'gsap';

这里用的是选项式,在methods属性中创建一个方法用来写gsap的动画。

gasp_animation(){let tl = gasp.timeline({defaults:{ ease:"power4.inOut", duration:2 }});tl.to(".sec-dec h1", {'clip-path': 'polygon(0% 100%,100% 100%,100% 0%,0% 0%)',y: 0,opacity: 1, duration: 2.2 } ).to(".search-container", {'clip-path': 'polygon(0% 100%,100% 100%,100% 0%,0% 0%)',opacity: 1}, "-=2").to(".art-card", { stagger: .2,opacity: 1},"-=2").to(".title",{stagger: .2,opacity: 1,y: 0},"-=2").to(".desc",{stagger: .2,opacity: 1,y: 0},"-=2").to("footer",{'clip-path': 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',opacity: 1,x: 0},"-=1");
}

 第一行是创建一个timeline,这是gsap中一个强大的排序工具,易于把一套动画作为一个整体进行控制并且能精确管理时间。在timeline中动画默认是挨个运行的,就是说第一个动画运行完第二个才开始运行,当然你可以设置某个动画提前运行,defaults是默认属性,ease是动画过渡,duration是每个动画的过渡时间。

let tl = gasp.timeline({defaults:{ ease:"power4.inOut", duration:2 }});

下面几行就是写gasp的动画,to()方法的意思是,from初始位置to最终位置,就是说你要填的是元素最终的样式。下面是动画的模板。

.to("CSS 选择器", {元素样式和gsap自家参数}, "时间控制")

 三、在页面加载时运行动画

mounted(){this.gasp_animation();
},

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

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

相关文章

【zlm】针对单个设备的码率的设置

目录 代码修改 实验数据一 实验数据二 同时拉一路视频后 修改记录 使用方法 代码修改 要被子类引用 ,所以放在protected 不能放private 下面的结论,可以在下面的实验数据里引用。“同时拉一路视频后” 实验数据一 https://10.60.3.45:10443/index…

php学习

php基础语法 一 php程序 1.php标记 开始标记<?php 和结束标记 ?>中间写 PHP 代码 当解析一个文件时&#xff0c;PHP 会寻找起始和结束标记&#xff0c;也就是告诉php 开始和停止解析二者之间的代码。此种解析方式使得PHP 可以被嵌入到各种不同的文档中去&#xff…

使用PSIM软件生成DSP28335流水灯程序

最近在学习DSP28335芯片&#xff0c;然后在使用PSIM仿真软件时发现这个仿真软件也支持28335芯片&#xff0c;于是就想学习下如何在PSIM软件中使用DSP28335芯片。在PSIM自带的官方示例中有使用DSP28335芯片的相关例子。 工程下载链接 https://download.csdn.net/download/qq_20…

图解CART分类树评估器的参数

图解CART分类树评估器的参数

联邦学习:密码学 + 机器学习 + 分布式 实现隐私计算,破解医学界数据孤岛的长期难题

联邦学习&#xff1a;密码学 机器学习 分布式 提出背景&#xff1a;数据不出本地&#xff0c;又能合力干大事联邦学习的问题 分布式机器学习&#xff1a;解决大数据量处理的问题横向联邦学习&#xff1a;解决跨多个数据源学习的问题纵向联邦学习&#xff1a;解决数据分散在多…

(一)SpringBoot3---尚硅谷总结

目录 示例Demo&#xff1a; 1、我们先来创建一个空工程&#xff1a; 2、我们通过Maven来创建一个Module&#xff1a; 3、让此Maven项目继承父项目: 4、导入web开发的场景启动器 5、创建Springboot项目的主入口程序&#xff1a; 6、举例测试&#xff1a; 7、Springboot还能…

020-信息打点-红蓝队自动化项目资产侦察企查产权武器库部署网络空间

020-信息打点-红蓝队自动化项目&资产侦察&企查产权&武器库部署&网络空间 #知识点&#xff1a; 1、工具项目-红蓝队&自动化部署 2、工具项目-自动化侦查收集提取 3、工具项目-综合&网络空间&信息 演示案例&#xff1a; ➢自动化-武器库部署-F8x ➢自…

leetcode—图 岛屿数量

岛屿数量 给你一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此外&#xff0c;你可以假设该网…

RabbitMQ入门篇【图文并茂,超级详细】

&#x1f973;&#x1f973;Welcome 的Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Docker的相关操作吧 目录 &#x1f973;&#x1f973;Welcome 的Huihuis Code World ! !&#x1f973;&#x1f973; 前言 1.什么是MQ 2.理解MQ 3.生活…

记一个奇怪的万能密码

前言 打的站点打多了&#xff0c;什么奇怪的问题都会发生 打点 开局一个登录框 用户枚举到账号爆破 测了一下&#xff0c;没发现admin的弱口令&#xff0c;但是发现存在用户枚举漏洞&#xff0c;因此准备跑一下账号 输入密码为123456 进行账号爆破 成功爆破出账号 是的…

【ARM 嵌入式 编译系列 7.3 -- GCC 链接脚本中 DISCARD 与 .ARM.exidx】

请阅读【嵌入式开发学习必备专栏 之 ARM GCC 编译专栏】 文章目录 背景.ARM.exidx方法一:使用链接器脚本方法二:使用链接器选项注意事项背景 在移植 RT-Thread 到 cortex-m33(RA4M2)上的时候,在编译的时候遇到下面问题: Building target: ra4m2.elf arm

PyTorch视觉工具箱:图像变换与上采样技术详解(1)

目录 Pytorch中Vision functions详解 pixel_shuffle 用途 用法 使用技巧 注意事项 参数 数学理论公式 示例代码及输出 pixel_unshuffle 用途 用法 使用技巧 注意事项 参数 数学理论公式 示例代码及输出 pad 用途 用法 使用技巧 注意事项 参数 示例代码…

智能机器人与旋量代数(9)

Chapt 3. 螺旋运动与旋量代数 3.1 螺旋运动 螺旋运动是关于一条空间直线的一个旋转运动&#xff0c;并伴随沿此直线的一个平移。是一种刚体绕空间轴 s s s旋转 θ \theta θ角&#xff0c;再沿该轴平移距离 d d d的复合运动&#xff0c;类似螺母沿螺纹做进给运动的情形。 一…

2024年【焊工(初级)】考试内容及焊工(初级)新版试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 焊工&#xff08;初级&#xff09;考试内容参考答案及焊工&#xff08;初级&#xff09;考试试题解析是安全生产模拟考试一点通题库老师及焊工&#xff08;初级&#xff09;操作证已考过的学员汇总&#xff0c;相对有…

docker 使用 vcs/2018 Verdi等 eda 软件

好不容易在ubuntu 安装好了eda软件&#xff0c;转眼就发现了自己的无知。 有博主几年前就搞定了docker上的EDA工具。而且更全&#xff0c;更简单。只恨自己太无知啊。 Synopsys EDA Tools docker image - EDA资源使用讨论 - EETOP 创芯网论坛 (原名&#xff1a;电子顶级开发网…

python解决从有序数组中寻找中位数

如果给定两个长度分别是m和n的有序数组array1和array2&#xff0c;需要对这两个有序数组找出其中的中位数&#xff0c;需要保证时间复杂度是O(long(min(m,n))&#xff0c;空间复杂度是O(1)。如下例子&#xff1a; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#…

【教程】混淆Dart 代码

什么是代码混淆&#xff1f; 代码混淆是一种将应用程序二进制文件转换为功能上等价&#xff0c;但人类难于阅读和理解的行为。在编译 Dart 代码时&#xff0c;混淆会隐藏函数和类的名称&#xff0c;并用其他符号替代每个符号&#xff0c;从而使攻击者难以进行逆向工程。 Flut…

ChatGPT和文心一言哪个更好用?

目录 一、ChatGPT和文心一言大模型的对比分析 1.1 二者训练的数据情况分析 1.2 训练大模型数据规模和参数对比 1.3 二者3.5版本大模型对比总结 二、ChatGPT和文心一言功能对比分析 2.1 二者产品提供的功能情况分析 2.2 测试一下各种功能的特性 2.2.1 文本创作能力 2.2…

电脑提示“No Boot Device”怎么办?

在Windows 11/10/8/7启动时遇到错误如“No Boot Device Found”和“未找到引导设备硬盘3F0”时&#xff0c;会导致电脑无法正常开机。那么&#xff0c;No Boot Device错误该怎么修复呢&#xff1f;下面我们就来了解一下。 修复 1. 检查启动顺序并将BIOS的设置重置为默认值 为…

非线性最小二乘问题的数值方法 —— 狗腿法 Powell‘s Dog Leg Method (II, Python 简单实例)

Title: 非线性最小二乘问题的数值方法 —— 狗腿法 Powell‘s Dog Leg Method (II, Python 简单实例) 姊妹博文 非线性最小二乘问题的数值方法 —— 狗腿法 Powell‘s Dog Leg Method (I - 原理与算法) 0.前言 本篇博文作为对前述 “非线性最小二乘问题的数值方法 —— 狗腿法…