当前位置: 首页 > news >正文

Vue封装的过度与动画

动画效果

 先把样式封装好,然后设置一个动画 

不需要vue也能实现的动画的效果,我们只需要判断一下,然后动态的添加和删除类名即可

那能不能不自己写动态,就靠vue

首先我们要靠<transition>标签把需要动画的包裹起来 

vue中的有固定的类名表示来和离开

.v-enter-active表示来

.v-leave-active表示走

 

 这里要注意的一点:如果我们给<transition name='hello'>给定了名字,那么我们下面的类名也要跟着改变

 还要注意一点:就是我们刚进入页面,它是没有动画的,因此我们要设置动画可以添加一个属性:appear="true"  <transition>在vue解析时用的,因此页面加载的时候是看不到它的

过渡效果

不使用动画,改用过渡实现效果

把进入起点元素的样式写在.hello-enter里面

把终点元素的样式写到enter-to里面 

就是这个意思

 然后过渡写在一起

优化完毕 

多个元素过渡

报错了,因为transition只能使用一个元素,而transition-group可以使用多个元素,但是transition-group里面的元素要标识唯一的key值

 

实现多个元素之间的过滤 

集成第三方动画

集成第三方动画库 

先下包npm install animate.js

 总结

改一下TODOList代码

* 作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。
* 图示:`<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />`
* 写法:
  1. 准备好样式:

     - 元素进入的样式:
       1. v-enter:进入的起点
       2. v-enter-active:进入过程中
       3. v-enter-to:进入的终点
     - 元素离开的样式:
       1. v-leave:离开的起点
       2. v-leave-active:离开过程中
       3. v-leave-to:离开的终点
  2. 使用 ``<transition>``包裹要过度的元素,并配置name属性:

     ```vue
     <transition name="hello">
         <h1 v-show="isShow">你好啊!</h1>
     </transition>
     ```
  3. 备注:若有多个元素需要过度,则需要使用:``<transition-group>``,且每个元素都要指定 ``key``值。

实现效果

 

 

相关文章:

Vue封装的过度与动画

动画效果 先把样式封装好&#xff0c;然后设置一个动画 不需要vue也能实现的动画的效果&#xff0c;我们只需要判断一下&#xff0c;然后动态的添加和删除类名即可 那能不能不自己写动态&#xff0c;就靠vue 首先我们要靠<transition>标签把需要动画的包裹起来 vue中…...

流量监控-ntopng

目录介绍安装使用介绍 ntopng是原始ntop的下一代版本&#xff0c;ntop是监视网络使用情况的网络流量探测器。ntopng基于libpcap&#xff0c;并且以可移植的方式编写&#xff0c;以便实际上可以在每个Unix平台&#xff0c;MacOSX和Windows上运行。 ntopng&#xff08;是的&…...

C++ 21 set容器

目录 一、set容器 1.1 简介 1.2 构造和赋值 1.3 大小和交换 1.4 插入和删除 1.5 查找和统计 1.6 set和multiset区别 1.7 内置类型指定排序规则 1.8 自定义数据类型指定排序规则 一、set容器 1.1 简介 ① set容器中所有元素在插入时自动被排序。 ② set容器和multise…...

什么是JWT

JSON Web Token&#xff08;缩写 JWT&#xff09;是目前最流行的跨域认证解决方案。 传统的session认证 http协议本身是一种无状态的协议&#xff0c;而这就意味着如果用户向我们的应用提供了用户名和密码来进行用户认证&#xff0c;那么下一次请求时&#xff0c;用户还要再一…...

Gradle7.4安装

前置&#xff1a;本文基于IntelliJ IDEA 2022.2.1 、jdk1.8进行安装 目录 1.挑选Gradle版本 2.系统变量设置 1.挑选Gradle版本 gradle兼容性差&#xff0c; 1.跟idea会有版本问题。 2.跟springboot也有兼容问题Spring Boot Gradle Plugin Reference Guide 首先查询版本&…...

【华为OD机试 2023最新 】 箱子之字形摆放(C++ 100%)

文章目录 题目描述输入描述输出描述备注用例题目解析C++题目描述 有一批箱子(形式为字符串,设为str), 要求将这批箱子按从上到下以之字形的顺序摆放在宽度为 n 的空地,请输出箱子的摆放位置。 例如:箱子ABCDEFG,空地宽度为3,摆放结果如图: 则输出结果为: AFG BE CD …...

Matplotlib库入门

Matplotlib库的介绍 什么是Matplotlib库&#xff1f; Matplotlib是一个Python的数据可视化库&#xff0c;用于绘制各种类型的图表&#xff0c;包括线图、散点图、条形图、等高线图、3D图等等。它是一个非常强大和灵活的库&#xff0c;被广泛用于数据科学、机器学习、工程学、…...

学生党用什么蓝牙耳机比较好?300内高性价比蓝牙耳机排行

随着蓝牙技术的发展&#xff0c;蓝牙耳机越来越普及&#xff0c;不同价位、不同性能的蓝牙耳机数不胜数。那么&#xff0c;学生党用什么蓝牙耳机比较好&#xff1f;下面&#xff0c;我来给大家推荐几款三百内高性价比蓝牙耳机&#xff0c;一起来看看吧。 一、南卡小音舱蓝牙耳…...

Lambda 表达式与函数式接口

函数式接口 如果一个接口&#xff0c;只有一个抽象方法&#xff0c;该接口即为函数式接口。函数式接口&#xff0c;即可使用 Lambda 表达式。 如下面的接口 public interface Translate {void translate();}目前该接口的抽象方法为无参数无返回值 Lambda 表达式 无参无返回值…...

后端代码规范

1、报文入参尽量避免使用实体类&#xff08;如果用实体类接受参数&#xff0c;一定要写好注解&#xff0c;具体用到了实体类的哪一个属性&#xff09; /*** * Description: 新增玉米观测记录主表信息* param param params* param return 参数* return Result 返回类型* author…...

web自动化测试:Selenium+Python基础方法封装(建议收藏)

01、目的 web自动化测试作为软件自动化测试领域中绕不过去的一个“香饽饽”&#xff0c;通常都会作为广大测试从业者的首选学习对象&#xff0c;相较于C/S架构的自动化来说&#xff0c;B/S有着其无法忽视的诸多优势&#xff0c;从行业发展趋、研发模式特点、测试工具支持&…...

while实现1到100相加求和-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)

【案例2-7】while实现1到100相加求和 一、案例描述 考核知识点 while循环语句 练习目标 掌握while循环语句。 需求分析 1-100之间的数相加求和&#xff0c;本案例通过while循环语句来实现。 案例分析 效果如图2-10所示。1-100所有数的和 具体实现步骤如下&#xff1a; 在&l…...

Thingsboard(2.4 postgresql版)数据库表结构说明

本文描述的表结构是根据thingsboard2.4&#xff08;postgresql版&#xff09;数据库中整理出来的&#xff0c;不一定完整&#xff0c;后续有新的发现再补充文档。 一、数据库E-R关系 Thingsboard2.4社区版共22个表&#xff0c;主要包括实体信息表、关系信息表、字典表和系统配…...

IDS反病毒与APT的具体介绍

文章目录一&#xff0c;IDS1. 什么是IDS&#xff1f;2. IDS和防火墙有什么不同&#xff1f;3. IDS工作原理&#xff1f;4. IDS的主要检测方法有哪些详细说明&#xff1f;5. IDS的部署方式有哪些&#xff1f;6. IDS的签名是什么意思&#xff1f;签名过滤器有什么作用&#xff1f…...

while do..while验证用户名和密码-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)

【案例2-8】while do..while验证用户名和密码 一、案例描述 考核知识点 while、do…while循环语句 练习目标 掌握while语句。do…while循环语句。 需求分析 在网站上登录时会用到表单&#xff0c;让用户属于用户名和密码&#xff0c;输入正确才可以进入&#xff0c;本案例将…...

tmux常用操作指令

创建会话tmux new -s 会话名 恢复会话tmux at -t 会话名 tmux attach -t 会话名 杀死会话tmux kill-session -t 编号 tmux kill-session -t 会话名 查询会话tmux ls tmux list-session 划分窗格划分上下两个窗格&#xff1a; tmux split-window 划分左右两个窗格&#xff1a;…...

【Linux】线程安全

线程安全&#xff1a;在多线程运行的时候&#xff0c;不论线程的调度顺序怎样&#xff0c;最终的结果都是 一样的、正确的&#xff0c;这个线程就是安全的。 保证线程安全的要求&#xff1a; 1. 对线程同步&#xff0c;保证同一时刻只有一个线程访问临界资源。 2.在多线程中使用…...

Redis-mysql 缓存实战

本文基于Springboot&#xff0c;mybatis plus&#xff0c;mysql&#xff0c;redis&#xff0c; Jedis模拟redis缓存实现 目录 1. 添加所需maven依赖 2. 设置数据库及数据表 3. 构建实体类 4. 构建工具类实现 redis 数据库连接池&#xff0c;redis 的读取&#xff0c;写入功…...

蓝桥杯:通电

蓝桥杯&#xff1a; 通电https://www.lanqiao.cn/problems/162/learning/ 目录 题目描述 输入描述 输出描述 输入输出样例 输入 输出 题目分析(最小生成树)&#xff1a; AC代码(Java) 题目描述 2015 年&#xff0c;全中国实现了户户通电。作为一名电力建设者&#xff0…...

一文搞懂 Kubernetes 的 Limits 和 Requests

当在Kubernetes中使用容器时&#xff0c;重要的是要知道所涉及的资源是什么以及如何需要它们。有些进程比其他进程需要更多的CPU或内存。有些是关键的&#xff0c;不应该被饿死。知道了这一点&#xff0c;我们应该正确配置我们的容器和Pod&#xff0c;以获得两者的最佳效果。在…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

从实验室到产业:IndexTTS 在六大核心场景的落地实践

一、内容创作&#xff1a;重构数字内容生产范式 在短视频创作领域&#xff0c;IndexTTS 的语音克隆技术彻底改变了配音流程。B 站 UP 主通过 5 秒参考音频即可克隆出郭老师音色&#xff0c;生成的 “各位吴彦祖们大家好” 语音相似度达 97%&#xff0c;单条视频播放量突破百万…...

FOPLP vs CoWoS

以下是 FOPLP&#xff08;Fan-out panel-level packaging 扇出型面板级封装&#xff09;与 CoWoS&#xff08;Chip on Wafer on Substrate&#xff09;两种先进封装技术的详细对比分析&#xff0c;涵盖技术原理、性能、成本、应用场景及市场趋势等维度&#xff1a; 一、技术原…...