vue2知识点：Vue封装的过度与动画

admin管理员组
文章数量:1794759

vue2知识点：Vue封装的过度与动画

@toc

3.25Vue封装的过度与动画

3.25.1知识点总结

3.25.2案例

注意点1：最好有css动画基础，再练习这块，但我只是了解所以原封不动拷贝看效果就是，当了解即可。

【动画/过度】使用方式：

1）定义【动画/过度】样式名称

2）用<transition>标签包裹起来要实现动画的元素

使用动画方式：

代码语言：java复制

<transition name="hello" appear>
	<h1 v-show="isShow">你好啊！</h1>
</transition>

<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>

使用过度方式：

代码语言：java复制

<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>

注意点2：动画效果来和去只写一个就行，另一个效果直接反转动画就是

注意点3：vue要求你想让谁实现动画效果，你就用<transition>标签把它包裹起来

代码语言：java复制

<transition name="hello" appear>
	<h1 v-show="isShow">你好啊！</h1>
</transition>

注意点4：这个<transition>和<template>标签效果一样，最终页面都不会显示这个标签，它只作为包裹作用使用

注意点5：每个过度可以取名字，如果\<transition>定义了name属性值，那么class的样式名称前缀也得改名，不然无法自动识别，比如未定义name属性，那么类名叫.v-enter-active和.v-leave-active，如果定义了name属性name="hello"，那么类名叫.hello-enter-active和.hello-leave-active，（即vue不跟动画进行对话，而是跟样式的名称进行对话。）

代码语言：java复制

<transition name="hello" appear>
	<h1 v-show="isShow">你好啊！</h1>
</transition>

<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>

注意点6：

问题：想实现多个元素产生相同过度效果时，错误代码如下，运行发生了报错如图

代码语言：java复制

<transition>
    <h1 v-show="!isShow" key="1">你好啊！</h1>
	<h1 v-show="isShow" key="2">尚硅谷！</h1>
</transition-group>

答案：报错说明\<transition>标签只能用于一个元素，如果想实现多个元素相同效果，请使用\<transition-group>标签。

问题：如果改成使用\<transition-group>标签后，运行还是报错了，感觉更严重了，下面两个过度一个都没显示，且还报错了。

答案：正确写法就是必须指定key值，这块在讲解v-for的时候着重强调要定义key的属性。

注意点7：Test3.vue使用第三方库animate.css，所以需要额外安装animate.css

使用步骤：

1）安装 npm install --save animate.css

2）引入 import 'animate.css'

3）使用3个标签即可实现【动画/过度】效果，发别是name、enter-active-class、leave-active-class，使用第三方库比较方便，就不用像Test1.vue和Test2.vue中定义一堆动画或过度\<style>标签内容

项目结构

main.js

代码语言：java复制

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

App.vue

代码语言：java复制

<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>

Test.vue

代码语言：java复制

<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>

Test2.vue

代码语言：java复制

<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>

Test3.vue

代码语言：java复制

<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.《基础篇第1章：vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

2.《基础篇第2章：vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

3.《进阶篇第3章：vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

4.《基础篇第4章》：使用vue脚手架创建项目

5.vue2知识点：数据代理

6.vue2知识点：事件处理

7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）

8.vue2知识点：计算属性与监听属性

9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）

10.vue2知识点：非单文件组件和单文件组件

11.vue2知识点：组件is属性

12.vue2知识点：组件模板定义

13.vue2知识点：组件的props属性、非props属性、props属性校验

14.vue2知识点：组件自定义事件

15.vue2知识点：组件插槽分发

16.vue2知识点：动态组件

17.vue2知识点：混入

18.vue2知识点：浏览器本地缓存

19.vue2知识点：全局事件总线（GlobalEventBus）

20.vue2知识点：消息订阅与发布

21.vue2知识点：nextTick语法

22.vue2知识点：Vue封装的过度与动画

23.vue2知识点：路由

24.vue2知识点：vm调用待$命令介绍

25.vue组件通信案例练习（包含：父子组件通信及平行组件通信）

26.vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解

27.vue2基础组件通信案例练习：待办事项Todo-list案例练习

28.vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存

29.vue2基础组件通信案例练习：把案例Todo-list改成使用自定义事件

30.vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线

31.vue2基础组件通信案例练习：把案例Todo-list改成使用消息订阅与发布

32.vue2基础组件通信案例练习：把案例Todo-list新增编辑按钮

33.vue2基础组件通信案例练习：把案例Todo-list改成使用动画与过度

34.学习vue2遇到过的问题及个人总结

本文标签： vue2知识点Vue封装的过度与动画

版权声明：本文标题：vue2知识点：Vue封装的过度与动画内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1754615354a1704408.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

写会百科网

vue2知识点：Vue封装的过度与动画

vue2知识点：Vue封装的过度与动画

3.25Vue封装的过度与动画

3.25.1知识点总结

3.25.2案例

本人其他相关文章链接

更多相关文章

vue2知识点：Vue封装的过度与动画

发表评论

推荐文章

memcpy的使⽤和模拟实现

国产安路FPGA SD NAND FLASH 初步描述

assert断言与const修饰指针的妙用（模拟实现strcpy函数）

Python实现 YouTube视频自动上传

检查代码中的数据引用错误

热门文章

Jsoup在Java中：解析京东网站数据

模拟退火算法最常见知识点详解与原理简介控制策略

移情别恋c++ ദ്ദി˶ｰ̀֊ｰ́ ) ——14.哈希(1)

【JVM】类加载机制

新加坡服务器的速度测试方法有哪些

释放无锁队列的力量：探索用循环数组实现无锁队列

webpack打包安全吗，如何防止被逆向？

CoDeF解决生成视频“闪烁”问题

xxlJob端口号及故障转移设置，解决负载均衡调度任务执行

C#的自定义异常

最新文章

Linux系统之jobs命令的基本使用

手把手教学！简单上手“AI复活”技术

单细胞Seruat和h5ad数据格式互换(R与python)方法学习和整理

JVM专题

学会5个图表，让数据分析简洁高效

写“藤”的作文1200字

有关于进步的作文

幼儿园见习报告

语数英寒假作业上册答案五年级

伊索寓言经典语词句摘抄