【Vue】学习笔记-Vue CLI $nextTick 过渡与动画

news2024/12/23 22:21:16

$nextTick

这是一个生命周期钩子
this.$nextTick(回调函数) 在下一次DOM更新结束后执行其指定的回调
什么时候用：当数据改变后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
使用$nextTick优化Todo-List
src/components/MyItem.vue

<template>
	<li>
		<label>
			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
			<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
			<!-- <input type="checkbox" v-model="todo.done"/> -->
			<span v-show="!todo.isEdit">{{todo.title}}</span>
			<input 
				type="text" 
				v-show="todo.isEdit" 
				:value="todo.title" 
				@blur="handleBlur(todo,$event)"
				ref="inputTitle"
			>
		</label>
		<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
		<button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
	</li>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'MyItem',
		//声明接收todo
		props:['todo'],
		methods: {
			//勾选or取消勾选
			handleCheck(id){
				//通知App组件将对应的todo对象的done值取反
				// this.checkTodo(id)
				this.$bus.$emit('checkTodo',id)
			},
			//删除
			handleDelete(id){
				if(confirm('确定删除吗？')){
					//通知App组件将对应的todo对象删除
					// this.deleteTodo(id)
					// this.$bus.$emit('deleteTodo',id)
					pubsub.publish('deleteTodo',id)
				}
			},
			//编辑
			handleEdit(todo){
				if(todo.hasOwnProperty('isEdit')){
					todo.isEdit = true
				}else{
					// console.log('@')
					this.$set(todo,'isEdit',true)
				}
				this.$nextTick(function(){
					this.$refs.inputTitle.focus()
				})
			},
			//失去焦点回调（真正执行修改逻辑）
			handleBlur(todo,e){
				todo.isEdit = false
				if(!e.target.value.trim()) return alert('输入不能为空！')
				this.$bus.$emit('updateTodo',todo.id,e.target.value)
			}
		},
	}
</script>

<style scoped>
	/*item*/
	li {
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}

	li label {
		float: left;
		cursor: pointer;
	}

	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}

	li button {
		float: right;
		display: none;
		margin-top: 3px;
	}

	li:before {
		content: initial;
	}

	li:last-child {
		border-bottom: none;
	}

	li:hover{
		background-color: #ddd;
	}
	
	li:hover button{
		display: block;
	}
</style>

在这里插入图片描述

过度与动画

Vue封装的过度与动画：在插入、更新或移除DOM元素时，在合适时候给元素添加样式类名
在这里插入图片描述
写法：

  1. 准备好样式
    元素进入的样式
    i. v-enter
    ii.v-enter-active
    iii.v-enter-to
    元素离开的样式
    i.v-leave
    ii.v-leave-active
    iii.v-leave-to
  2. 使用 包裹要过度的元素，并配置name属性，此时需要将上面的样式名的v换为name
  3. 要让页面一开始就要显示动画，需要添加appear
<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

	.hello-enter-active{
		animation: atguigu 0.5s linear;
	}

	.hello-leave-active{
		animation: atguigu 0.5s linear reverse;
	}

	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>
  1. 备注：若有多个元素需过度，则需要使用,且每个元素都要指定key值
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
  1. 第三方动画库 animate.css
<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group 
			appear
			name="animate__animated animate__bounce" 
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>
</template>

src/App.vue

<template>
	<div>
		<Test/>
		<Test2/>
		<Test3/>
	</div>
</template>

<script>
	import Test from './components/Test'
	import Test2 from './components/Test2'
	import Test3 from './components/Test3'

	export default {
		name:'App',
		components:{Test,Test2,Test3},
	}
</script>

src/components/test.vue

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

	.hello-enter-active{
		animation: atguigu 0.5s linear;
	}

	.hello-leave-active{
		animation: atguigu 0.5s linear reverse;
	}

	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

src/components/test2.vue

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group name="hello" appear>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
	/* 进入的起点、离开的终点 */
	.hello-enter,.hello-leave-to{
		transform: translateX(-100%);
	}
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
	/* 进入的终点、离开的起点 */
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}

</style>

在这里插入图片描述

src/components/test3.vue

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group 
			appear
			name="animate__animated animate__bounce" 
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>
</template>

<script>
	import 'animate.css'
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
	

</style>

使用动画优化Todo-List
src/components/MyList.vue

<template>
	<ul class="todo-main">
		<transition-group name="todo" appear>
			<MyItem 
				v-for="todoObj in todos"
				:key="todoObj.id" 
				:todo="todoObj" 
			/>
		</transition-group>
	</ul>
</template>

<script>
	import MyItem from './MyItem'

	export default {
		name:'MyList',
		components:{MyItem},
		//声明接收App传递过来的数据
		props:['todos']
	}
</script>

<style scoped>
	/*main*/
	.todo-main {
		margin-left: 0px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding: 0px;
	}

	.todo-empty {
		height: 40px;
		line-height: 40px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding-left: 5px;
		margin-top: 10px;
	}

	.todo-enter-active{
		animation: atguigu 0.5s linear;
	}

	.todo-leave-active{
		animation: atguigu 0.5s linear reverse;
	}

	@keyframes atguigu {
		from{
			transform: translateX(100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

安装animate.css动画

1.npm install animate.css

引用

import ‘animate.css’

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

winform-SunnyUI控件解决大小位置变化

winform-SunnyUI控件解决大小位置变化

文章目录 前言问题种类使用SunnyUI解决控件DPI问题&#xff08;分辨率问题&#xff09;1.添加配置文件app.manifest2.将配置文件中dpiAware打开3.添加uiStyleManager1控件并将控件中DPIScale设置为true4.效果图 使用FlowLayOutPanel解决控件边距问题1.问题样式2.使用FlowLayOut…
阅读更多...
Grafana系列-统一展示-12-RED Method Dashboard

Grafana系列-统一展示-12-RED Method Dashboard

系列文章 Grafana 系列文章 概述 目前关于监控指标, 主流的有 3 个方法(Method): RED : Rate&#xff08;访问速率&#xff09;, Errors&#xff08;错误&#xff09;, Duration&#xff08;响应时长&#xff09; - 由 tom_wilkie 引入USE : Utilization&#xff08;利用率…
阅读更多...
TEMPUS FUGIT: 2

TEMPUS FUGIT: 2

环境准备 靶机链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;5i9p 虚拟机网络链接模式&#xff1a;桥接模式 攻击机系统&#xff1a;kali linux 2022.03 信息收集 1.对靶机进行端口和服务的扫描 nmap -sV -p- -A 10.10.10.130 可以看到22端口是关闭的 2.用…
阅读更多...
线段树-哈工大数据结构与算法作业

线段树-哈工大数据结构与算法作业

title: 线段树-哈工大作业 date: 2023-05-16 11:42:26 tags: 数据结构与算法 线段树 问题&#xff1a; 区间查询求和问题:给定一个含有n个整数序列的数组A&#xff0c;查询任意区间最大值与区间和的复杂度为O(n)&#xff0c;若进行m次查询&#xff0c;则总的复杂度为O(mn)。…
阅读更多...
深析AutosarNM 网络管理

深析AutosarNM 网络管理

深析AutosarNM 网络管理 深析AutosarNM 网络管理1. AutosarNM 网络管理相关的专业术语2. 各种模式下的各种状态下&#xff0c;报文的收发情况汇总如下表&#xff1a;3. AutosarNM网络管理使用的时间参数&#xff1a;4. AutosarNM网络管理唤醒请求(Wake Up Request)5. ​​​​​…
阅读更多...
MySQL 5.7数据库下载与安装教程

MySQL 5.7数据库下载与安装教程

说明&#xff1a; 安装环境:Win10 64位 软件版本:MySQL 5.7.35 解压版 一.下载 点击下载地址&#xff1a; MySQL :: Download MySQL Community Server (Archived Versions) https://downloads.mysql.com/archives/community/ 选择合适的版本下载 绿色框框 是正式版&#xff0…
阅读更多...
第02讲：SpringCloudStream

第02讲：SpringCloudStream

一、什么是SpringCloudStream SpringCloudStream是SpringCloud的一个子项目&#xff0c;他提供了一套更加通用的操作MQ的解决方案 Destination Binder&#xff08;目标绑定器&#xff09; &#xff1a;微服务与消息中间件通信的组件Destination Bindings&#xff08;目标绑定&…
阅读更多...
2023爱分析･云原生 IDE 市场厂商评估报告-行云创新（CloudToGo)

2023爱分析･云原生 IDE 市场厂商评估报告-行云创新（CloudToGo)

1. 研究范围定义 企业数字化转型初期&#xff0c;通过资源池云化&#xff0c;解决了IDC时代运维、部署、扩容的难题&#xff0c;但传统应用单体架构厚重、烟囱式架构等带来的一系列应用层面的问题并没有得到有效解决&#xff0c;云对业务的价值主要还停留在资源供给的阶段…
阅读更多...
Scaled dot-prodect Attention的原理和实现（附源码）

Scaled dot-prodect Attention的原理和实现（附源码）

文章目录 背景什么是AttentionAttention权重的计算方法1. 多层感知机法2. Bilinear方法3. Dot Product4. Scaled Dot Product Scaled dot-prodect Attention的源码实现 背景 要了解深度学习中的Attention&#xff0c;就不得不先谈Encoder-Decoder框架&#xff08;sequence to s…
阅读更多...
拍立淘API接口说明文档 按图搜索淘宝商品API 实时数据返回

拍立淘API接口说明文档 按图搜索淘宝商品API 实时数据返回

开发背景&#xff1a; 随着电商行业的不断发展&#xff0c;人们的购物需求日益增多。在购买商品时&#xff0c;很多人会通过搜索引擎、社交媒体等手段来获取信息或灵感。但是&#xff0c;在这些渠道中找到想要的商品并不容易&#xff0c;因为其中可能会混杂着一些广告或无关内…
阅读更多...
Android内存优化检测工具LeakCanary使用

Android内存优化检测工具LeakCanary使用

一、什么是LeakCanary leakCanary是Square开源框架&#xff0c;是一个Android和Java的内存泄露检测库。如果检测到某个activity有内存泄露&#xff0c;LeakCanary就是自动地显示一个通知&#xff0c;所以可以把它理解为傻瓜式的内存泄露检测工具。通过它可以大幅度减少开发中遇…
阅读更多...
Java 并发队列详解

Java 并发队列详解

一&#xff0c;简介 1&#xff0c;并发队列两种实现 以ConcurrentLinkedQueue为代表的高性能非阻塞队列以BlockingQueue接口为代表的阻塞队列 2&#xff0c;阻塞队列与非阻塞队列的区别 当阻塞队列是空的时&#xff0c;从队列中获取元素的操作将会被阻塞&#xff0c;试图从…
阅读更多...
【BFS】华子20230506笔试第三题（动态迷宫问题）Java实现

【BFS】华子20230506笔试第三题（动态迷宫问题）Java实现

文章目录 题目链接思路BFS板子我的解答 题目链接 塔子哥的codeFun2000&#xff1a;http://101.43.147.120/p/P1251 测试样例1 输入 3 2 1 0 1 2 2 1 2 0 100 100 100 100 000 100 000 000 001输出 1测试样例2 输入 3 2 1 0 2 0 0 1 2 2 000 000 001 010 101 101 110 010 …
阅读更多...
在docker容器中启动docker服务并实现构建多平台镜像的能力

在docker容器中启动docker服务并实现构建多平台镜像的能力

在docker容器中启动docker服务并实现构建多平台镜像的能力 背景 在容器中运行docker&#xff0c;是devops中无法避免的场景&#xff0c;通常被应用于提供统一的镜像构建工具&#xff0c;出于安全考虑&#xff0c;不适合将主机的docker进程暴露给公司的内部人员使用&#xff0…
阅读更多...
SpringCloud alibaba微服务b2b2c电子商务平台

SpringCloud alibaba微服务b2b2c电子商务平台

1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务、系统服务、中间件服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot2、My…
阅读更多...
飞书开发流程

飞书开发流程

1、进入飞书并创建一个应用 链接: 创建应用 创建应用成功后需要审核通过&#xff0c;如果你拥有管理权限则可以自己进入管理后台通过审核&#xff0c;否则需要联系管理员通过审核 2、进入开发者后台 链接: 发者后台 3、在该调试平台上测试 以这个订阅审批事件为例 这一步…
阅读更多...
DHCP协议简单配置

DHCP协议简单配置

实验原理 网络中主机需要与外界进行通信时，需要配置自己的IP地址、网关地址、DNS服务器等网络参数信息。手工在每台主机上配置维护成本高，容易出错，而且不利于管理员统一维护。 通过DHCP地址自动配置协议，使终端设备能自动获取地址，实现即插即用且IP地址统一由服务器管理…
阅读更多...
springboot+java充电桩充电额维修管理系统

springboot+java充电桩充电额维修管理系统

项目介绍 Spring Boot 是 Spring 家族中的一个全新的框架&#xff0c;它用来简化Spring应用程序的创建和开发过程。也可以说 Spring Boot 能简化我们之前采用SSM&#xff08;Spring MVC Spring MyBatis &#xff09;框架进行开发的过程。 系统基于B/S即所谓浏览器/服务器模式…
阅读更多...
STM32 学习笔记_9 定时器中断：编码器接口模式

STM32 学习笔记_9 定时器中断：编码器接口模式

TIM编码器接口 之前我们处理旋转编码器&#xff0c;是转一下中断一次&#xff0c;挺消耗资源的。 我们可以利用TIM的编码器功能&#xff0c;隔一段时间取一下旋转器值使得cnt或–&#xff0c;以此判断旋转位置以及计算速度&#xff0c;相比中断节约资源。相当于外接了一个有方…
阅读更多...
Kubernetes那点事儿——暴露服务之Service

Kubernetes那点事儿——暴露服务之Service

Kubernetes那点事儿——暴露服务之Service 前言一、Service二、Service与Pod关系三、Service常用类型ClusterIPNodePortLoadBalancer 四、Service代理模式IptablesIPVS修改代理模式 前言 K8s中&#xff0c;我们将应用跑在Pod里。多数情况下是一组Pod&#xff0c;用户如何访问这…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023