18.Vue过渡&动画：transition

最新推荐文章于 2023-08-15 16:51:23 发布
最新推荐文章于 2023-08-15 16:51:23 发布
阅读量841 收藏 2
点赞数 1
分类专栏： Vue 2.0 文章标签： vue 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyc3545/article/details/108461676
版权

简介

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡：

  • 条件渲染 (使用 v-if)
  • 条件展示 (使用 v-show)
  • 动态组件
  • 组件根节点
     

过渡类名

在进入的过渡中，会有 3 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

离开的过渡中，会有 3 个 class 切换。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
在这里插入图片描述
 

单元素/组件的过渡

进入/离开效果相同的css过渡

以下便是使用transition包裹p标签实现p标签淡入淡出的例子。这里的transition使用了name=‘xxx’字段，所以默认的.v-enter被替换成了.xxx-enter，其余类名同理。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
		<style type="text/css">
			.xxx-enter-active,
			.xxx-leave-active {
                /* 进入与离去的过程中opacity改变过程持续.5s */
				transition: opacity .5s;
			}

			.xxx-enter,
			.xxx-leave-to {
                /* 进入之前/离开之后opacity为0（进入之后，离开之前样式是既定的，不用定义） */
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<button @click="isShow=!isShow">执行动画</button>
			<transition name="xxx">
				<p v-if="isShow">我出现了</p>
			</transition>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#content',
			data: {
				isShow: true
			}
		});
	</script>
</html>

运行：
在这里插入图片描述
 

进入/离开效果不同的css过渡

<style type="text/css">
/* 进入时所有效果匀速播放.5s */
.xxx-enter-active {
    transition: all .5s ease;
}

/* 离开时所有效果变速播放1s */
.xxx-leave-active {
    transition: all 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.xxx-enter,
.xxx-leave-to {
    /* 两个效果,transition后面用all */
    transform: translateX(10px);
    opacity: 0;
}
</style>

运行：
在这里插入图片描述
 

css动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

<style type="text/css">
.xxx-enter-active {
    /* 使用xxx-in这一变化 */
    animation: xxx-in .5s;
}

.xxx-leave-active {
    /* 使用xxx-in这一变化的反转 */
    animation: xxx-in .5s reverse;
}

/* 按照执行进度设置元素状态 */
@keyframes xxx-in {
    0% {
    	transform: scale(0);
    }
    
    50% {
    	transform: scale(1.5);
    }
    
    100% {
    	transform: scale(1);
    }
}
</style>

<body>
    <div id="content">
        <button @click="isShow=!isShow">执行动画</button>
        <transition name="xxx">
            <p v-if="isShow">我出现了11111111111111111111111111111111111111111111111</p>
        </transition>
    </div>
</body>

运行，效果正常：
在这里插入图片描述
但是如果内容较短：

<p v-if="isShow">我出现了</p>

运行效果会不正常：
在这里插入图片描述
设置样式display: inline-block可以解决此问题：

<p v-if="isShow" style="display: inline-block;">我出现了</p>

运行：
在这里插入图片描述
 

自定义过渡类名+第三方动画库

我们可以通过以下 attribute 来自定义过渡类名，他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用既方便又炫酷：

  • enter-class
  • enter-active-class
  • enter-to-class
  • leave-class
  • leave-active-class
  • leave-to-class
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
  		<!-- 引入第三方动画库Animate.css -->
		<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
		<style type="text/css">
		</style>
	</head>
	<body>
		<div id="content">
			<button @click="isShow=!isShow">执行动画</button>
                   <!-- 使用自定义过渡的类名enter-active-class、leave-active-class -->
			<transition 
                       enter-active-class="animated tada" 
                       leave-active-class="animated bounceOutRight" 
                       name="xxx">
				<p v-if="isShow" >我出现了</p>
			</transition>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#content',
			data: {
				isShow: true
			}
		});
	</script>
</html>

运行：
在这里插入图片描述
 

多个元素的过渡

当有相同标签名的元素切换时，需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们。

<style type="text/css">
		.xxx-enter-active,
		.xxx-leave-active {
			transition: opacity .5s;
		}

		.xxx-enter,
		.xxx-leave-to {
			opacity: 0;
		}
	</style>
 
	<body>
		<div id="el">
			<div><button @click="isEditing=!isEditing">改一下</button></div>

                   <!-- transition 多个元素要分别加上 key -->
			<transition name="xxx">
				<button v-if="isEditing" key="save">
					Save
				</button>
				<button v-else key="edit">
					Edit
				</button>
			</transition>
		</div>
	</body>
	<script type="text/javascript">
		let vm = new Vue({
			el: "#el",
			data: {
				isEditing: true
			}
		})
	</script>

 

过渡模式

上面的例子中两个按钮都被重绘了，一个离开过渡的同时另一个开始进入过渡，这样的展示效果并不美观，对于这种情况可以设置过渡模式解决：

  • in-out：新元素先进行过渡，完成之后当前元素过渡离开。
  • out-in：当前元素先进行过渡，完成之后新元素过渡进入。

in-out效果：

<transition name="xxx" mode="in-out">...</transition>

在这里插入图片描述
out-in效果：
在这里插入图片描述
 

多个组件的过渡

多个组件的过渡不需要 key attribute，需要使用<component v-bind:is=“view”></component>动态组件。

    <style type="text/css">
     	.xxx-enter-active, .xxx-leave-active {
                  transition: opacity .3s ease;
            }
            
            .xxx-enter, .xxx-leave-to{
                  opacity: 0;
            }
    </style>
 
     <body>
		<div id="el">
			<div><button @click="changeView">改一下</button></div>

			<transition name="xxx" mode="out-in">
				<!--component + v-bind:is 作为动态组件 -->
				<component v-bind:is="viewName"></component>
			</transition>
		</div>
	</body>
	<script type="text/javascript">
		let vm = new Vue({
			el: "#el",
			data: {
				viewName: 'v-a' //放置【当前组件】的变量
			},
			components: {
				'v-a': {
					template: '<div>Component A</div>'
				},
				'v-b': {
					template: '<div>Component B</div>'
				}
			},
			methods: {
                           //改变当前展示的组件
				changeView() {
					if (this.viewName === 'v-a') {
						this.viewName = 'v-b'
					} else {
						this.viewName = 'v-a'
					}
				}
			}
		})
	</script>

运行：
在这里插入图片描述
 

列表过渡

同时渲染整个列表（比如v-for），可以使用 <transition-group> 组件。特点如下：

  • 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。也可以通过 tag attribute 自定义为其他元素。
  • 过渡模式不可用，因为不再相互切换特有的元素。
  • 内部元素 总是需要 提供唯一的 key 属性值。
  • CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

进入/离开过渡

	<style type="text/css">
		.list-item {
			display: inline-block;
			margin-right: 10px;
		}

		.xxx-enter-active,
		.xxx-leave-active {
			transition: all 1s;
		}

		.xxx-enter,
		.xxx-leave-to {
			opacity: 0;
			transform: translateY(30px);
		}
	</style>
 
	<body>
		<div id="el">
			<button v-on:click="add">增加一个数</button>
			<button v-on:click="remove">删除一个数</button>
			<!-- tag设置外层真实标签为<p> -->
			<transition-group name="xxx" tag="p">
				<span v-for="item in items" v-bind:key="item" class="list-item">
					{{ item }}
				</span>
			</transition-group>
		</div>
	</body>
	<script type="text/javascript">
		let vm = new Vue({
			el: "#el",
			data: {
				items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				nextNum: 10
			},
			methods: {
				randomIndex: function() {
					return Math.floor(Math.random() * this.items.length)
				},
				add: function() {
					this.items.splice(this.randomIndex(), 0, this.nextNum++)
				},
				remove: function() {
					this.items.splice(this.randomIndex(), 1)
				},
			}
		})
	</script>

运行：
在这里插入图片描述
 

排序过渡

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move attribute，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。

	<style type="text/css">
        /* 使用v-move */
        .xxx-move {
            transition: transform 1s;
        }
	</style>

	<body>
		<div id="content">
			<button @click="reverseArray">反序</button>
			<div>
				<transition-group name="xxx" tag="ul">
					<li v-for="item in items" :key="item">
						{{ item }}
					</li>
				</transition-group>
			</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#content',
			data: {
				items: new Array()
			},
			methods: {
				//反转数组
				reverseArray() {
					this.items.reverse();
				}
			},
			//初始化数组
			created() {
				for (var i = 0; i < 10; i++) {
					this.items.push(i);
				}
			}
		});
	</script>

运行：
在这里插入图片描述

高新园养鸡场
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue运用transition实现过渡动画
10-17
vue的过渡动画，主要是transition标签的使用，配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果，感兴趣的朋友一起看看吧
进入/离开&列表过渡总结
weishichuan4321的博客
04-16 1695
概述vue在插入、更新或移除dom时，提供多种不同方法的应用过渡效果，包括以下工具：（1）在css过渡和动画中自动应用class（2）可以配合第三方css动画库，如animate.css（3）在过渡钩子函数中使用javascript直接操作dom（4）可以配合第三方javascript动画库，如velocity.js单元素/组件的过渡vue提供了transition的封装组件，在下列情形中，可以给...
Vue练习题（带解析）
qq_60245590的博客
06-11 7202
在目标页面中获取 query 参数的正确方式是使用 $route.query.参数名，而不是 this.route.query.参数名。但是它并不包含父作用域中的属性。C. 通过 npx vue-cli-service helps 命令是错误的，正确的命令是 npx vue-cli-service help，用于查看可用命令的帮助信息。要访问父作用域中的属性，可以使用 Vue 提供的 props 选项来声明父组件向子组件传递的属性，然后在子组件内部使用 this.$props 来访问这些属性。
vue3路由缓存组件状态以及设置转场动画
逆风优雅的博客
05-28 2307
与vue2组件状态缓存 <div id="app"> <keep-alive> <router-view /> </keep-alive> </div> 不一致。 vue3使用上面这种组件缓存方式不会生效。 vue3组件缓存的方式为： <router-view v-slot="{ Component }"> <!-- <transition name="fade
Vue第四章课后习题【哈哈】
qq_46556714的博客
11-05 9765
课后习题 文章目录课后习题一、填空题二、判断题三、选择题四、简答题 一、填空题 Vue提供的内置过渡封装组件是_ transition__。 2.在过渡封装组件中使用__name__属性可以重置过渡中切换类名的前缀。 3.通过___appear_特性设置节点在初始渲染的过渡。 4.在离开的过渡中有__v-leave,v-leave-active,v-leave-to____3个class切换。 5.__自定义过渡__的类名优先级要高于普通的类名。 二、判断题 1.函数式组件中的render0函数用来创建
Vue阶段知识点整理
weixin_45343973的博客
08-13 240
目前三大主流框架包含：vue.js、Angular.js、react.js 主流架构模式MVC—Model-View-Controller、MVP—Model-View-presenter、MVVM—Model-View-ViewModel，vue使用的开发模式为MVVM。 生命周期钩子分为四个阶段：创建beforeCreate、created，挂载BeforeMount、mounte...
router-view v-slot=“{ Component }“
qq_47247479的博客
03-27 4944
router-view v-slot="{ Component }"
【Vue-Router】路由过渡动效
最新发布
小秀的博客
08-15 1162
在 Vue Router 中，你可以通过过渡动效（Transition Effects）为路由切换添加平滑的过渡效果，从而提升用户体验。过渡动效可以使用 Vue 的。/* 注意 style 标签 别加 scoped 不然设置宽高不生效 */组件添加一个 CSS 类，以便在路由切换时触发过渡效果。可以发现在切换到首页或者登录页都有过渡动效。首先，你需要在你的 Vue 项目中导入。在需要添加过渡动效的地方（通常是路由的。组件和 CSS 过渡来实现。实例演示（以下实例会用到。
浅析＜router-view＞ v-slot事例
热门推荐
m13012606980的专栏
07-28 1万+
浅析 v-slot事例
vue-router配合transition完成路由切换动画
陈景夏
12-27 4194
基本情况下在app.vue入口文件加上这个就行了。 <transition name="scale" mode="out-in"> <router-view></router-view> </transition> 但在新版vuerouter需要更改下 <router-view v-slot="{ Component }"> <transition name="scale" mode="out-in"> <co
VUE3 之 使用标签实现动画与过渡效果（下） - 这个系列的教程通俗易懂，适合自学
追风人的博客
03-06 1302
目录 1. 概述 2.使用标签实现动画与过渡的效果 3. 综述 4. 个人公众号 1. 概述 毛毛虫效应： 有这样一个实验，将许多毛毛虫放在一个花盆边缘，使它们首尾相接，围成一个圈。然后在离花盆很近的地方撒了一些毛毛虫的食物。 此时，毛毛虫并不会向食物的方向爬去，而是在花盆边缘，一个跟着一个的转圈，直到7天后，因为饥饿和精疲力尽相继死去。 这是毛毛虫的一种特性吧，它们喜欢跟随前者的路线行走，这也是固化思维的一种表现。 因此解放思维，有创新精神是很重要的。 言归正传，今天我们继.
Vue 过渡（动画）transition组件案例详解
08-31
主要介绍了Vue 过渡（动画）transition组件案例详解，非常不错，具有参考借鉴价值，需要的朋友参考下
vue 组件中使用 transition 和 transition-group实现过渡动画
10-16
本文给大家分享一下vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版，本文给大家介绍的非常详细，具有一定的参考借鉴价值，...
vue--transition过渡
SS_yinying的博客
03-12 563
transition过渡效果 所谓的过渡，在dom元素 插入，更新或者移除dom时，给dom元素加上过渡动画，使之看起来没那么生硬，transition的作用其实就是给过渡的元素在显示/隐藏，插入/移除时添加一些class 过渡条件 条件渲染（v-if） 条件展示（v-show） 动态组件 根元素 当元素插入或删除时包含在transition组件中的元素Vue将会做一下处理 自动嗅探目标元素...
VUE之过渡transition
weixin_45626166的博客
10-31 375
过渡的类名 在进入/离开的过渡中，会有 6 个 class 切换： v-enter（插入）类： ①v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除 ②v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 ③v-enter-...
vue中组件保活＜keep-alive＞的使用
球球不吃虾WHR2349博客
04-28 1916
vue组件缓存技术，router-view，keep-alive的使用
vue：路由动画过渡
weixin_53571388的博客
03-03 500
Vue2 <template> <div id="app"> <router-view class="router-view" v-slot="{ Component }"> <transition :name="transitionName"> <component :is="Component" /> </transition> </router-
vue3 调用router-view下的组件方法
欢迎来到我的小世界
03-03 2296
vue3 调用router-view下的组件方法
vue.esm.js:5105 [Vue warn]: <transition-group> children must be keyed: <ElTag> found in
07-15
CSDN开发的ChatGPT AI对话模型是一个文本生成模型，无法直接运行或理解具体的错误信息。根据您提供的错误提示，这是Vue.js框架给出的警告信息。该警告通常出现在使用<transition-group>组件时，子元素没有唯一的key属性。 在Vue.js中，<transition-group>组件用于实现列表动画效果。每个列表项都应该有一个唯一的key属性，用于跟踪列表项在过渡过程中的状态变化。根据错误提示，您需要确保在<ElTag>组件中的子元素上添加唯一的key属性。 示例代码： ```html <transition-group> <ElTag v-for="item in items" :key="item.id">{{ item.name }}</ElTag> </transition-group> ``` 在以上示例中，假设`items`是一个包含多个对象的数组，每个对象都有一个唯一的`id`属性。我们使用`v-for`指令循环渲染每个`item`，并且为每个`item`设置了唯一的`key`属性。 请您检查<ElTag>组件内部的子元素，确保它们都有唯一的key属性。如果问题仍然存在，请提供更多相关代码以便我们更好地帮助您解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值