多元素过渡理解和一点透

最新推荐文章于 2022-09-10 08:46:51 发布

俗世凡人行

最新推荐文章于 2022-09-10 08:46:51 发布

阅读量181

点赞数

分类专栏： Vue 文章标签：多元素过渡

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107633840

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

多元素过渡

当有相同标签名的元素切换时, 需要通过key attribute 设置唯一的值来标记以让Vue区分它们,否则vue为了效率只会替换相同标签内部的内容;
过渡模式 mode
- in-out: 新元素先进行过渡, 完成之后当前元素过渡离开;
- out-in: 当前元素先进行过渡, 完成之后新元素过渡进入;

eg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>多元素的过渡</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			/* 过渡样式fade-enter-active进入 ; fade-leave-active离开*/
			.fade-enter-active, .fade-leave-active {
			  transition: opacity .5s;
			}
			/* fade-enter进入  fade-leave-to离开  */
			.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
			  opacity: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="isShow=!isShow">点击</button>
			<!--  标签transition  -->
			<transition name="fade" mode="out-in" @before-enter="beforeEnter" @after-leave="afterLeave">
				<p v-if="isShow" key="1"> hello Vue </p>
				<p v-else="isShow" key="2"> hello lnmp </p>
			</transition>
			
		</div>
	</body>
</html>
<script type="text/javascript">		

	var vm = new Vue({
		el:'#app',
		data:{	
			isShow:true
		},
		methods:{
			// 进来之前的操作
			beforeEnter:function(){
				console.log('beforeEnter')
			},
			// 离开之后的操作
			afterLeave:function(){
				console.log('afterLeave')				
			}
			
		}		
	});
</script>