vue中的动画组件使用及如何在vue中使用animate.css

“< Transition >” 是一个内置组件,这意味着它在任意别的组件中都可以被使用,无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发:

  • 由 v-if 所触发的切换
  • 由 v-show 所触发的切换
  • 由特殊元素 切换的动态组件
  • 改变特殊的 key 属性
    官方文档链接:https://cn.vuejs.org/guide/built-ins/transition.html

以下是一个简单的demo

<template><div style="margin-top: 200px;margin-left: 200px;"><div><button @click="show = !show">切换动画</button></div><div><Transition name="fade"><p v-show="show">测试动画</p></Transition></div></div>
</template><script setup lang="ts">
import { ref,watch } from 'vue'
let show = ref<Boolean>(true);
</script><style scoped>
/* 开始过度 */
.fade-enter-from{background:red;width:0px;height:0px;
}
/* 过渡中 */
.fade-enter-active{transition: all 2.5s linear;
}
/* 过度完成 */
.fade-enter-to{background:yellow;width:200px;height:200px;
}
/* 离开的过度 */
.fade-leave-from{width:200px;height:200px;background:yellow;
}
/* 离开中过度 */
.fade-leave-active{transition: all 1s linear;
}
/* 离开完成 */
.fade-leave-to{background:skyblue;width:0px;height:0px;
}
</style>

效果如图所示

在这里插入图片描述

一共有 6 个应用于进入与离开过渡效果的 CSS class。

  1. v-enter-from:进入动画的起始状态。在元素插入之前添加,在元素插入完成后的下一帧移除。

  2. v-enter-active:进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加,在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。

  3. v-enter-to:进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时),在过渡或动画完成之后移除。

  4. v-leave-from:离开动画的起始状态。在离开过渡效果被触发时立即添加,在一帧后被移除。

  5. v-leave-active:离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加,在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。

  6. v-leave-to:离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时),在过渡或动画完成之后移除。

使用vue使用animate.css动画

动画地址https://animate.style/
你也可以向 < Transition > 传递以下的 props 来指定自定义的过渡 class:

enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class

通过自定义class 结合css动画库animate css
安装库 npm install animate.css
引入 import ‘animate.css’
使用方法

<template><div style="margin-top: 200px;margin-left: 200px;"><div><button @click="show = !show">切换动画</button></div><div><!-- <Transition name="fade"><p v-show="show">测试动画</p></Transition> --><transitionleave-active-class="animate__animated animate__bounceInLeft"enter-active-class="animate__animated animate__bounceInRight"><div v-if="show">测试动画</div></transition></div></div>
</template><script setup lang="ts">
import { ref,watch } from 'vue'
let show = ref<Boolean>(true);
</script>

动画生命周期

利用这些动画生命周期钩子 我们可以在动画执行的过程中 做一些其他事情 例如使用el-dialog弹窗时 我们可以在弹窗动画开始的时候就可以获取数据了

<Transition@before-enter="onBeforeEnter" @enter="onEnter"@after-enter="onAfterEnter"@enter-cancelled="onEnterCancelled"@before-leave="onBeforeLeave"@leave="onLeave"@after-leave="onAfterLeave"@leave-cancelled="onLeaveCancelled"
><!-- ... -->
</Transition>
// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
function onBeforeEnter(el) {}// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el, done) {// 调用回调函数 done 表示过渡结束// 如果与 CSS 结合使用,则这个回调是可选参数done()
}// 当进入过渡完成时调用。
function onAfterEnter(el) {}// 当进入过渡在完成之前被取消时调用
function onEnterCancelled(el) {}// 在 leave 钩子之前调用
// 大多数时候,你应该只会用到 leave 钩子
function onBeforeLeave(el) {}// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el, done) {// 调用回调函数 done 表示过渡结束// 如果与 CSS 结合使用,则这个回调是可选参数done()
}// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
function onAfterLeave(el) {}// 仅在 v-show 过渡中可用
function onLeaveCancelled(el) {}

具体参考官网https://cn.vuejs.org/guide/built-ins/transition.html

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

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

相关文章

PHP之curl详细讲解

cURL&#xff08;全称为Client for URLs&#xff09;是一个功能强大的开源库&#xff0c;用于在多种协议上进行数据传输、发送HTTP请求和获取响应。它支持多种协议&#xff0c;包括HTTP、HTTPS、FTP、SMTP等&#xff0c;并且能够与各种服务器进行通信。 cURL库可以通过命令行工…

单机无锁线程安全队列-Disruptor

Disruptor 1、基本介绍 说到队列&#xff0c;除了常见的mq中间件&#xff0c;java中也自带线程安全的BlockingQueue&#xff0c;但是BlockingQueue通过在入队和出队时加锁的方式避免并发操作&#xff0c;性能上会大打折扣。 而Disruptor是一个线程安全、低延迟、吞吐量高的队…

redis整理

1. 数据类型 string , hash, 链表&#xff0c;Set, ZSet. string 底层是sds, sds与普通字符串的区别: a. sds存储了字符串长度&#xff0c;获取长度的时间复杂度为O(1); b. sds操作字符串会预先判断长度是否满足要求, 不会有字符串溢出的情况出现; c. 提前预分配, 惰性回收…

Vue学习计划--Vue2(四)watch、class、style、set

Vue 监听(watch): 监听一个属性的变化 监事属性watch: 当监视的属性变化时&#xff0c;回调函数自动调用&#xff0c;进行相关操作监视的属性必须存在&#xff0c;才能进入监视监视的两种写法&#xff1a; new Vue 时传入watch配置通过 vm.$watch()监视 immediate初始化时让han…

SpectralGPT: Spectral Foundation Model 论文翻译3

遥感领域的通用大模型 2023.11.13在CVPR发表 原文地址&#xff1a;[2311.07113] SpectralGPT: Spectral Foundation Model (arxiv.org) E.消融研究 在预训练阶段&#xff0c;我们对可能影响下游任务表现的各种因素进行了全面研究。这些因素包括掩蔽比、ViT patch大小、数据规…

多线程--11--ConcurrentHashMap

ConcurrentHashMap与HashMap等的区别 HashMap线程不安全 我们知道HashMap是线程不安全的&#xff0c;在多线程环境下&#xff0c;使用Hashmap进行put操作会引起死循环&#xff0c;导致CPU利用率接近100%&#xff0c;所以在并发情况下不能使用HashMap。 ConcurrentHashMap 主…

Linux信息收集

Linux信息收集 本机基本信息 #管理员 $普通用户 之前表示登录的用户名称&#xff0c;之后表示主机名&#xff0c;再之后表示当前所在目录 / 表示根目录 ~表示当前用户家目录1、内核&#xff0c;操作系统和设备信息 uname -a 打印所有可用的系统信息 uname -r 内核版本 u…

01_阿里云_Xshell连接服务器

PC使用Xshell连接阿里云服务器 问题引出 之前使用Xshell连接阿里云服务器连接的好好的&#xff0c;今天准备上去服务器学习Linux发现连不上了&#xff0c;后来发现是防火墙的问题&#xff0c;还有阿里云的安全组也需要设置 解决方案 方法一&#xff1a;&#xff08;简单粗暴…

3D模型材质编辑

在线工具推荐&#xff1a; 三维数字孪生场景工具 - GLTF/GLB在线编辑器 - Three.js AI自动纹理化开发 - YOLO 虚幻合成数据生成器 - 3D模型在线转换 - 3D模型预览图生成服务 如今&#xff0c;3D 纹理、打印和建模都非常流行。使用可用的高级工具&#xff0c;创建 3D 模型…

基于Git的代码工程管理——学习记录一

一、Git简概[1] Git是一个分布式版本控制系统&#xff0c;它跟踪任何一组计算机文件的更改&#xff0c;通常用于在软件开发过程中协调协作开发源代码的程序员之间的工作。其为实现快速、数据完整性以及分布式非线性工作流程&#xff08;在不同计算机上运行数千个并行分支&#…

钉钉提交审批意见,并上传附件接口集成

一&#xff1a;适配器 DingtalkApprovalFilesExecute 参考方案链接&#xff1a;轻易云数据集成平台 二&#xff1a;请求接口。配置参数 接口文档&#xff1a;使用了新旧接口 服务端API发起带有附件的审批流并下载附件 - 钉钉开放平台 接口&#xff1a;topapi/processinsta…

搜索与回溯算法②

求0-9的数字可以组成的所有k 位数。 def backtrack(start, path, k, n, results):"""核心函数。:param start: 下一个添加的数字的起始位置:param path: 当前构建的路径&#xff0c;代表一个组合:param k: 组合中所需的数字个数:param n: 可选数字的最大值:par…

Python编程技巧:多层for循环的高级应用

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com Python的for循环结构是编程中最基础也是最常用的控制结构之一。通过for循环&#xff0c;可以轻松遍历数据集合和执行重复的操作。然而&#xff0c;当我们面对多层for循环时&#xff0c;性能和可读性可能会成为挑…

linux使用逻辑券lvm进行磁盘管理

lvm的安装 在线安装 yum install lvm2 离线安装&#xff0c;下载后执行 rpm -ivh * --nodeps --force 在如下网站中挨个下载http://mirrors.163.com/centos/7/os/x86_64/Packages/ device-mapper-1.02.170-6.el7_9.5.x86_64.rpm device-mapper-event-1.02.170-6.el…

A-B 数对

A-B 数对 题目背景 出题是一件痛苦的事情&#xff01; 相同的题目看多了也会有审美疲劳&#xff0c;于是我舍弃了大家所熟悉的 AB Problem&#xff0c;改用 A-B 了哈哈&#xff01; 题目描述 给出一串正整数数列以及一个正整数 C C C&#xff0c;要求计算出所有满足 A −…

Redis的三种消息队列实现方式

目录 前言 List实现消息队列 PubSub消息队列 Stream消息队列 三种实现方式对比 前言 为什么要使用Redis的消息队列&#xff1f; 成本低&#xff0c;对于RabbitMQ或是Kafka来说&#xff0c;已经是重量级的消息队列。 Redis的三种实现方式&#xff1a; List结构&#xff1…

形态学操作—形态学梯度

形态学梯度&#xff08;Morphological Gradient&#xff09;是图像形态学处理中的一种操作&#xff0c;它通过对图像的膨胀和腐蚀操作之间的差异来突出图像中的边缘信息。这种操作有助于增强图像中物体的边界&#xff0c;使它们更加突出。   在数学上&#xff0c;形态学梯度的…

【安卓12源码】WMS系列:addWindow 和 removeWindow流程

一、Window 的属性 Window的属性定义在WindowManager的内部类LayoutParams中&#xff0c;了解Window的属性能够更好的理解WMS的内部原理。Window的属性有很多种&#xff0c;与应用开发最密切的有三种&#xff0c;它们分别是Type(Window的类型)、Flag(Window的标志)和SoftInputM…

SMART PLC温度采集模块温度转换FC(梯形图+SCL代码)

对于模拟量输入采集,温度变送器等我们可以利用线性转换功能块完成温度采集,西门子PLC有温度采集模块,利用温度采集模块采集温度我们的转换关系无需进行线性变换,下面我们具体介绍。温度采集线性转换功能块请参考下面的文章链接: https://rxxw-control.blog.csdn.net/arti…

Hadoop学习笔记(HDP)-Part.06 安装OracleJDK

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …