Vue3的transition标签以及animate.css使用详解

一:前言

        在项目开发中,有一种特殊情况是使用动画过渡去完成某个效果。比如淡入淡出,或者在动画完成后执行某些操作等。在以前开发中我们通常会选择使用 CSS3 进行研发。但是这样会有很多不好的地方,比如最原始化的封装,以及复杂需求下的代码量庞大且冗余。再者就是本可以不使用 CSS 样式的文件又添加了 CSS 文件。这样是很奇怪的。

        因此我们现在在进行动画过渡可以使用别人写好提供给我们的 animate.css 样式。而在 Vue3 开发中,当我们需要在动画过渡前中后或者被中断的时候执行某些 JS 逻辑时,可以使用 transition 标签。接下来,让我们来看一下如何这两个如何使用吧!

二:使用

1、animate.css

        先放上 animate.css 的官网:

Animate.css | A cross-browser library of CSS animations.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.icon-default.png?t=N7T8https://animate.style/        进入官网后我们可以在右侧看到有很多动画的样式,随便点击一个样式后,中间的文字会进行相对应的变化。

        引入项目:

  • 首先打开项目,在项目根目录下打开 powershell 
  • 输入 npm install animate.css -S
  • 等待安装成功后,进入你需要使用的页面
  • 在文件内引入:import 'animate.css';
  • 在官网中复制喜欢的样式,放进你需要添加的标签的 class 中
  • 注意,上面这一步需要在复制的前面加上 animate_animated 才可以有效果
<div class="animate__animated animate__bounceOutDown" v-if="isShow">内容</div><script>// 引入animate.cssimport 'animate.css';
</script>

        这时候我们就可以看到效果了。animate.css 的使用是很简单的。

2、transition 标签

        这个标签是内置的,我们直接在 html 中书写即可,我们可以看到代码提示:这代表着,他是有多个接收值的,并且有多个内置方法。知道这些我们就方便写后面的代码了。

1)初始化代码

         这里是我们代码的初始化,代码效果如下图所示:点击按钮显示或者隐藏里面的元素

<template><div class="home"><button @click="isShow = !isShow">切换状态</button><transition><div v-if="isShow" class="content"></div></transition></div>
</template><script lang="ts" setup>
import { ref } from 'vue';const isShow = ref(false)
</script><style scoped>
.content {margin-top: 10px;width: 300px;height: 300px;background: pink;
}
</style>

2)第一种:直接使用变量进行控制

        这种是比较简单的方法,如下面代码所示,我们传了,进入和离开的样式。这样的优点是结合 animate.css 代码行数比较少,且具有较高的阅读性,方便后期修改和维护。但是有一个不好的地方就是,这样只是定义了单纯的动画过渡,如果书写逻辑将会很繁琐,需要定义 ref 等等,这里我就不举例了。因此产生了使用方法控制。

        <transition :duration="500"leave-active-class="animate__animated animate__bounceOutDown"enter-active-class="animate__animated animate__bounceInLeft"><div v-if="isShow" class="content"></div></transition>
3)第二种:使用内置方法进行控制

        代码如下,我们可以看到,这八个内置方法其实是八个生命周期。以进入为例,四个分别是进入前,进入中,进入后,进入中断。这样我们可以在不同的周期中写不同的逻辑,是不是很方便了?

        这里额外注意一下,各个周期中的 el 是接收的这个 element 元素,另外有两个特殊的周期是 enter 和 leave 。这两个的参数中有接收 done 当执行了这个 done 方法后,才会执行 enter-after 声明周期。leave 同理。

<template><div class="home"><button @click="isShow = !isShow">切换状态</button><transition :duration="500"@before-enter="EnterBefore"@enter="EnterActive"@after-enter="EnterTo"@enter-cancelled="EnterCancelled"@before-leave="LeaveForm"@leave="Leave"@after-leave="LeaveTo"@leave-cancelled="LeaveCancell"><div v-if="isShow" class="content"></div></transition></div>
</template><script lang="ts" setup>
import { ref } from 'vue';const isShow = ref(false)const EnterBefore = (el:Element)=>{console.log('进入前');}
const EnterActive = (el:Element,done:Function)=>{console.log('进入中');setTimeout(()=>{done() // 执行完成,要等待三秒钟才会执行下面这个过度完成的方法},3000)
}
const EnterTo = (el:Element)=>{console.log('过度完成');
}
const EnterCancelled = (el:Element)=>{console.log('过渡效果被打断');
}// 离开
const LeaveForm = (el:Element)=>{console.log('离开之前');
}
const Leave = (el:Element,done:Function)=>{console.log('离开过度曲线');setTimeout(()=>{done() // 执行完成,要等待三秒钟才会执行下面这个过度完成的方法},3000)
}
const LeaveTo = (el:Element)=>{console.log('离开完成');
}
const LeaveCancell = (el:Element)=>{console.log('离开被打断');
}
</script>

4)使用 jasp 进行优化
  • 使用 npm i gsap -S 安装jasp
  • 在项目中使用 import jasp from 'gasp' 导入

        项目代码优化如下,我们本次只使用三个生命周期。这时,我们看到的应该是一个在左上角缩放的图,由于没有装转 git 工具,因此这里不放效果 git 图。各位小伙伴可以在项目里 安装 animate 和 gasp 后直接将下面的代码复制进页面即可看到效果。

<template><div class="home"><button @click="isShow = !isShow">切换状态</button><transition :duration="500"@before-enter="EnterBefore"@enter="EnterActive"@leave="Leave"><div v-if="isShow" class="content"></div></transition></div>
</template><script lang="ts" setup>
import { ref } from 'vue';
import gsap from 'gsap' // npm i gsap -Sconst isShow = ref(false)const EnterBefore = (el:Element)=>{console.log('进入前');gsap.set(el,{width:0,height:0})
}
const EnterActive = (el:Element,done:gsap.Callback)=>{console.log('进入中');gsap.to(el,{width:300,height:300,onComplete:done // 加载完成后调用 done 方法})
}// 离开
const Leave = (el:Element,done:gsap.Callback)=>{console.log('离开过度曲线');gsap.to(el,{width:0,height:0,onComplete:done})
}</script><style scoped>
.content {margin-top: 10px;background: pink;
}
</style>

三:结尾

        过渡效果可以说在开发中算是比较重要的一部分。熟练的掌握图像过渡可以更加合理贴切的显示与隐藏,在视觉上给用户更好的体验。并且书写逻辑也方便,可以类似断点的形式去定位问题出现的地方。好啦以上就是本文的全部内容,希望能够对各位小伙伴有所收获哦!

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

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

相关文章

VMware系列:此平台不支持虚拟化 Intel-VT-x/EPT 或 AMD-V/RVI

此平台不支持虚拟化 Intel-VT-x/EPT 或 AMD-V/RVI 一. 此平台不支持虚拟化 Intel-VT-x/EPT 或 AMD-V/RVI1.首先了解此选项有什么作用:(开启虚拟化 虚拟化 Intel-VT-x/EPT 或 AMD-V/RVI )操作1.从系统层面设置入手:操作2.从电脑软件冲突层面解决问题:然后关闭Hyper-V的相关设…

Spring Security 6.x 系列(5)—— Servlet 认证体系结构介绍

一、前言 本章主要学习Spring Security中基于Servlet 的认证体系结构&#xff0c;为后续认证执行流程源码分析打好基础。 二、身份认证机制 Spring Security提供个多种认证方式登录系统&#xff0c;包括&#xff1a; Username and Password&#xff1a;使用用户名/密码 方式…

别做无用功!了解伦敦银交易指标的分类

在伦敦银投资中&#xff0c;我们都喜欢使用技术指标来帮助我们判断市场行情、预测银价点位。其实&#xff0c;伦敦银的技术指标是有不同分类的&#xff0c;我们了解主要的几类&#xff0c;这样在交易中才不至于将相同类型的叠加在一起&#xff0c;这样容易降低决策效率。 分类一…

Docker compose启动服务遇到的问题

这是学长留的一个任务&#xff0c;用docker compose启动三个服务&#xff0c;分别是minio、elasticsearch、nginx。 话不多说&#xff0c;让我们看看有哪些错误。 一、数据卷挂载权限问题 这是原始docker-compose.yaml文件 version: "3.8"networks:my-net:name: g…

最强学习辅助工具重磅上市:虚拟与现实互动结合助力学习更快一步

太让人震撼了&#xff01;&#xff01;当当狸这款AR智能学习图集打破了传统历史学习材料壁垒 将AR增强现实技术与诗词互动、历史人文、古典建筑巧妙融合 内容真实有趣&#xff0c;全面激发孩子们的学习探索兴趣 妈妈们都想入手的【教学辅助工具】 有了它&#xff0c;孩子学…

2.3基于springboot养老院管理系统

2.3基于springboot养老院管理系统 成品项目已经更新&#xff01;同学们可以打开链接查看&#xff01;需要定做的及时联系我&#xff01;专业团队定做&#xff01;全程包售后&#xff01; 2000套项目视频链接&#xff1a;https://pan.baidu.com/s/1N4L3zMQ9nNm8nvEVfIR2pg?pwd…

docker-compose Install OrangeHRM

OrangeHRM 前言 OrangeHRM 是一个全面的人力资源管理(HRM) 系统,它包含任何企业所需的所有基本功能。OrangeHRM旨在支持任何规模的团队,包括初创企业、中小企业以及大型跨国组织。 OrangeHRM 提前条件 OrangeHRMdocker & docker-composer 安装or

el-table,列表合并,根据名称列名称相同的品名讲其它列值相同的进行合并

el-table,列表合并,根据名称列名称相同的品名讲其它列值相同的进行合并,并且不能垮品名合并 如图 用到el-table合并行的方法合并 tableSpanMethod({ row, column, rowIndex, columnIndex }) {if (column.property "materielName") {//合并商品名const _row this…

Linux后台运行jar包

Linux后台运行jar包 方式一 命令如下&#xff1a; java -jar /data/tools/jar/demo.jar注&#xff1a;/data/tools/jar&#xff1a;指定jar包所在位置&#xff0c;否则要在jar包所在位置运行改命令&#xff1b;当前ssh窗口被锁定&#xff0c;可按CTRL C打断程序运行&#xf…

小功能实现(十八)生成kml文件

引入依赖 <!--解析、生成kml文件类--><dependency><groupId>de.micromata.jak</groupId><artifactId>JavaAPIforKml</artifactId><version>2.2.0</version></dependency>使用方法 注意&#xff1a;需要什么内容可自行添…

Mysql深入——6

数据库占用空间太大&#xff0c;将表删除掉一半的数据后&#xff0c;为什么表的大小还是没有变 数据库的回收&#xff0c;一个InnoDB表中包含了两个部分&#xff0c;分别是表结构定义和数据。在Mysql8.0以前&#xff0c;表结构是存在以.frm为后缀的文件里&#xff0c;在mysql8…

CCC联盟数字钥匙(一)——UWB MAC概述

本文在前面已经介绍了相关UWB的PHY之后&#xff0c;重点介绍数字钥匙&#xff08;Digital Key&#xff09;中关于MAC层的相关实现规范。由于MAC层相应涉及内容比较多&#xff0c;本文首先从介绍UWB MAC的整体框架&#xff0c;后续陆续介绍相关的网络、协议等内容。 1、UWB MAC架…

android安全启动验证链(安全启动 secure boot)

android安全启动验证链_android 安全启动_Kael.dong的博客-CSDN博客

class类

如果有一个名为 ExampleClass 的类&#xff0c;可以通过 ExampleClass.class 获取表示该类的 Class 类实例&#xff0c;或者如果你有一个 ExampleClass 类的对象 exampleObject&#xff0c;可以通过 exampleObject.getClass() 来获取。这些 Class 类的实例可以用来在运行时查询…

深入redis过程-命令

目录 通用命令 get set keys exists del expire key seconds ttl type 常用数据结构 String类型 SET GET MSET MGET INCR INCRBY INCRBYFLOAT SETNX SETEX Hash类型 HSET key field value HGET key field HMSET HMGET HGETALL HKEYS HVALS HINCRB…

Linux telnet命令详解:通过TCP/IP网络连接与管理远程机器(附实例教程和注意事项)

Linux telnet命令介绍 telnet命令&#xff0c;全称为teletype network&#xff0c;是一个使用telnet网络协议来连接并管理远程机器的命令。它通过TCP/IP网络使用端口23来建立连接&#xff0c;并提供了一种使用命令行界面&#xff08;CLI&#xff09;管理远程系统的方式。虽然t…

vue3 wangeditor 富文本使用自定义上传图片

wangeditor wangeditor 下载 pnpm add wangeditor/editorpnpm add wangeditor/editor-for-vuenextmode: ‘default’ 默认模式 - 集成了 wangEditor 所有功能 mode: ‘simple’ 简洁模式 - 仅有部分常见功能&#xff0c;但更加简洁易用 基础结构 <script lang"ts&…

定制开发办公软件在企业发展中的优势|app小程序网站搭建

定制开发办公软件在企业发展中的优势|app小程序网站搭建 如今&#xff0c;办公软件已经成为企业日常工作的必需品。很多企业为了提高工作效率和满足自身业务需要&#xff0c;选择定制开发办公软件。下面将介绍定制开发办公软件在企业发展中的优势。 首先&#xff0c;定制开发办…

Moonbeam生态项目分析 — — 聚合流动性管理协议GAMMA

流动性激励计划Moonbeam Ignite是帮助用户轻松愉快体验Moonbeam生态的趣味活动。在Moonbeam跨链连接的推动下&#xff0c;DeFi的各种可能性在这里爆发。DeFi或许不热门&#xff0c;但总有机会捡漏&#xff0c;了解Monbeam生态项目&#xff0c;我们邀请Moonbeam大使分享他们的研…

驾驭未来,智能化管理——汽车ERP系统

在汽车行业竞争日益激烈的今天&#xff0c;如何提高生产效率、优化供应链管理&#xff0c;确保产品质量和客户满意度成为汽车制造企业亟需解决的难题。为解决这一问题&#xff0c;汽车企业资源计划&#xff08;ERP&#xff09;系统应运而生。本文将为您介绍汽车ERP系统&#xf…