当前位置: 首页 > 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;以获得两者的最佳效果。在…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

渗透实战PortSwigger靶场:lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

aardio 自动识别验证码输入

技术尝试 上周在发学习日志时有网友提议“在网页上识别验证码”&#xff0c;于是尝试整合图像识别与网页自动化技术&#xff0c;完成了这套模拟登录流程。核心思路是&#xff1a;截图验证码→OCR识别→自动填充表单→提交并验证结果。 代码在这里 import soImage; import we…...