VueDay03:过渡&动画

最新推荐文章于 2022-12-28 16:19:03 发布

'"<>{{7*7}}

最新推荐文章于 2022-12-28 16:19:03 发布

阅读量144

点赞数

分类专栏： # Vue

本文链接：https://blog.csdn.net/weixin_43415644/article/details/106603137

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

0x01 单元素/组件的过渡

#淡入淡出效果：

复制官网文档上css样式

用<transition name='fade'></transition>将需要淡入淡出的部分包住

适用于：

条件渲染：v-if

条件展示：v-show

等控制的组件的淡入淡出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> -->
				<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
				<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet"> -->
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script> -->
		<link rel="stylesheet" href="common/bootstrap.css">
		<script src="common/jquery.js"></script>
		<script src="common/vue.js"></script>
		<script src='common/bootstrap.js'></script>
		<style>
		.fade-enter-active, .fade-leave-active {
 		 transition: opacity .5s;
		}
		.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
		  opacity: 0;
		}
		</style>

	</head>
	<body>
		<div class="container">
			<div class="page-header">
				<div class="page-title">
					<h1>VueLab</h1>
				</div>
			</div>
			<div id="app">
				<button class="btn btn-primary" @click="isShow=!isShow">点击</button>
				<transition name='fade'>
					<p v-show="isShow">Hello DataBank</p>
				</transition>
			</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				isShow:true
			},
			components:{
			}
		})
	</script>
</html>

当淡入时，会触发beforeEnter事件

当淡出时，会触发afterLeave事件

	<body>
		<div class="container">
			<div class="page-header">
				<div class="page-title">
					<h1>VueLab</h1>
				</div>
			</div>
			<div id="app">
				<button class="btn btn-primary" @click="isShow=!isShow">点击</button>
				<transition name='fade' @before-enter='beforeEnter' @after-leave='afterLeave'>
					<p v-show="isShow">Hello DataBank</p>
				</transition>
			</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				isShow:true
			},
			components:{
			},
			methods:{
				beforeEnter:function(){
					console.log('beforeEnter');
				},
				afterLeave:function(){
					console.log('afterLeave');
				}
			}
		})
	</script>

0x02 多个元素的过渡：

当有相同标签名的元素切换时，需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了过渡模式

in-out：先淡入，淡入完成后，另一个元素再淡出
out-in：先淡出，淡出完成后，另一个元素再淡入

	<body>
		<div class="container">
			<div class="page-header">
				<div class="page-title">
					<h1>VueLab</h1>
				</div>
			</div>
			<div id="app">
				<button class="btn btn-primary" @click="isShow=!isShow">点击</button>
				<transition name='fade' mode="out-in" @before-enter='beforeEnter' @after-leave='afterLeave'>
					<p v-if="isShow" key='1'>Hello DataBank</p>
					<p v-else key='2'>Rui Shang</p>
				</transition>
			</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				isShow:true
			},
			components:{
			},
			methods:{
				beforeEnter:function(){
					console.log('beforeEnter');
				},
				afterLeave:function(){
					console.log('afterLeave');
				}
			}
		})
	</script>

0x03 多个组件的过渡

	<body>
		<div class="container">
			<div class="page-header">
				<div class="page-title">
					<h1>VueLab</h1>
				</div>
			</div>
			<div id="app">
				<div class='label label-danger' @click='changeCom("coma")'>coma</div>
				<div class='label label-success' @click='changeCom("comb")'>comb</div>
				<transition name='fade' mode='out-in'>
						<component :is='currentCom'></component>
				</transition>
			</div>
			

		</div>
	</body>
	<script>
		var coma={
			template:'<p>this is coma</p>',
		};
		var comb={
			template:'<p>this is comb</p>'
		};
		var vm = new Vue({
			el:'#app',
			data:{
				currentCom:''
			},
			components:{
				'coma':coma,
				'comb':comb
			},
			methods:{
				changeCom:function(data){
					this.currentCom = data;
				}	
			}
		})
	</script>

0x04 列表的过渡

使用<transition-group></transition-group>

每个元素需要有一个属性 key ，且key必须唯一

transition-group默认解释为span标签，可以通过tag属性来设置transition-group变成什么标签

过渡模式 mode不可用

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> -->
				<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
				<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet"> -->
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script> -->
		<link rel="stylesheet" href="common/bootstrap.css">
		<script src="common/jquery.js"></script>
		<script src="common/vue.js"></script>
		<script src='common/bootstrap.js'></script>
		<style>
		.fade-enter-active, .fade-leave-active {
 		 transition: opacity .5s;
		}
		.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
		  opacity: 0;
		}
		.label{
			display:inline-block;
			margin-top:15px!important;
			margin-right:15px;
		}
	
		</style>
	</head>
	<body>
		<div class="container">
			<div class="page-header">
				<div class="page-title">
					<h1>VueLab2</h1>
				</div>
			</div>
			<div id="app">
				<div class="row">
					<div class="col-xs-8">
							<input type="text" class='form-control' placeholder='标签' v-model="user">
					</div>
					<div class="col-xs-4">
							<button class='btn btn-danger' @click='addUser'>添加标签</button>
					</div>
				</div>
				<transition-group tag='div' name='fade'>
						<div class='label label-danger' v-for="(value,index) in arr" :key='index'>
								{{value}}
								<span class='glyphicon glyphicon-remove' @click='delUser(index)'></span>
						</div>
				</transition-group>
			</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				user:'',
				arr:[]
			},
			methods:{
				addUser:function(){
					this.arr.push(this.user);
					this.user='';
				},
				delUser:function(index){
					// 从索引开始删除一个
					this.arr.splice(index,1);
				}
			}
		})
	</script>
</html>

0x05 自定义过渡的类名

百度搜索:animate.css 下载对应的css文件

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

transition标签可以添加如下属性来使用第三方动画库：

enter-class 设置进入的样式

enter-active-class

leave-class 设置出去的样式

leave-active-class

第三方动画库的使用方法：

animated 对应的动画名

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue</title>
		<link rel="stylesheet" href="common/bootstrap.css">
		<script src="common/jquery.js"></script>
		<script src="common/vue.js"></script>
		<script src='common/bootstrap.js'></script>
		<link rel="stylesheet" href="common/animate.css">
	</head>
	<body>
		<div class="container">
			<div class="page-header">
				<div class="page-title">
					<h1>VueLab2</h1>
				</div>
			</div>
			<div id="app">
				<transition name='fade' enter-active-class="animated rollIn"
				leave-active-class="animated rollOut" mode='out-in'>
					<p v-if='isShow' key='1'>hello</p>
					<p v-else>Hello DataBank</p>
				</transition>
				<button class='btn btn-primary' @click='isShow=!isShow'>展示</button>
			</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				isShow:true,
			},
			methods:{
		
			}
		})
	</script>
</html>

'"<>{{7*7}}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VueDay03:过渡&动画

0x01 单元素/组件的过渡#淡入淡出效果：复制官网文档上css样式用<transition name='fade'></transition>将需要淡入淡出的部分包住适用于：条件渲染：v-if条件展示：v-show等控制的组件的淡入淡出<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>用户登录</ti
复制链接

扫一扫

专栏目录