编程开源技术交流，分享技术与知识

网站首页 > 开源技术 正文

Vue.js教程(八)--过渡(动画)（vue页面切换过渡效果）

wxchong 2024-08-30 03:48:22 开源技术 22 ℃ 0 评论

1. 简介

 Vue在插入、更新或者移除DOM时，提供了多种不同方式的应用过渡效果
本质上还是使用css3动画，transition、animation

2. 基本用法

使用transition组件，将需要动画的元素放入组件中
 <transition name="">
 元素
 </transition>

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

  • v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
  • v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
  • v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
  • v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
  • v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
  • v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

注：对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

示例：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.hello{
				width: 200px;
				height: 200px;
				background: #007AFF;
			}
			.fade-enter-active,.fade-leave-active{
				transition: all 3s ease;
			}
			.fade-enter-active{/*进入后*/
				opacity: 1;
				width: 200px;
				height: 200px;
			}
			.fade-leave-active{
				opacity: 0;/*透明度0，当宽高为20的时候变为0*/
				width: 20px;
				height: 20px;
			}
			/*进入的初始状态，需要放在.fade-enter-active的后面*/
			.fade-enter{
				opacity: 0;
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<button @click="show=!show">显示/隐藏</button>
			<transition name="fade">
				<div class="hello" v-show="show">{{msg}}</div>
			</transition>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init()
			var vm = new Vue({
				el: "#content",
				data: {
					show: false,
					msg: "hello world!"
				}
			})
		</script>
	</body>
</html>

钩子函数

可以在属性中声明 JavaScript 钩子

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 v-on:leave-cancelled="leaveCancelled"
>
 <!-- ... -->
</transition>

示例：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.hello{
				width: 200px;
				height: 200px;
				background: #007AFF;
			}
			.fade-enter-active,.fade-leave-active{
				transition: all 3s ease;
			}
			.fade-enter-active{/*进入后*/
				opacity: 1;
				width: 200px;
				height: 200px;
			}
			.fade-leave-active{
				opacity: 0;/*透明度0，当宽高为20的时候变为0*/
				width: 20px;
				height: 20px;
			}
			/*进入的初始状态，需要放在.fade-enter-active的后面*/
			.fade-enter{
				opacity: 0;
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<button @click="show=!show">显示/隐藏</button>
			<transition name="fade" 
			@before-enter="beforeEnter" 
			@enter="enter" 
			@after-enter="afterEnter" 
			@enter-cancelled="enterCancelled"
			@before-leave="beforeLeave"
			@leave="leave" 
			@after-leave="afterLeave" 
			@leave-cancelled="leaveCancelled">
				<div class="hello" v-show="show">{{msg}}</div>
			</transition>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init()
			var vm = new Vue({
				el: "#content",
				data: {
					show: false,
					msg: "hello world!"
				},
				methods: {
					beforeEnter: function(el) {
						// alert("动画进入之前");
					},
					enter: function(el) {
						// alert("动画进入时");
					},
					afterEnter: function(el) {
						// alert("动画进入之后");
						el.style.background="red";
					},
					beforeLeave: function(el) {
						// alert("动画即将离开之前");
					},
					leave: function(el) {
						// alert("动画离开时");
					},
					afterLeave: function(el) {
						// alert("动画离开之后");
						el.style.background="blue";
					}
				}
			})
		</script>
	</body>
</html>

3. 结合第三方动画库animate.css一起使用

示例：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/animate.css" rel="stylesheet" />
		<style>
			.hello{
				width: 100px;
				height: 100px;
				background: #4CD964;
			 margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<button @click="show=!show">显示/隐藏</button>
			<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
				<div class="hello" v-show="show">{{msg}}</div>
			</transition>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init()
			var vm = new Vue({
				el: "#content",
				data: {
					show: false,
					msg: "hello world!"
				}
			})
		</script>
	</body>
</html>

注：使用animate动画库的class时要先加上它的基础class，比如我们要使用从左进入的动画，需这样写：

class="animated bounceInLeft"

4. 多元素动画

<transition-group> 元素作为多个元素/组件的过渡效果。 渲染一个真实的 DOM 元素。默认渲染 ，可以通过 tag 属性配置哪个元素应该被渲染。

注意，每个 的子节点必须有 独立的 key ，动画才能正常工作

<transition-group> 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它将会获取应用 CSS 移动类 (通过 name 属性或配置 move-class 属性自动生成)。如果 CSS transform 属性是“可过渡”属性，当应用移动类时，将会使用 FLIP 技术 使元素流畅地到达动画终点。

<transition-group tag="ul" name="slide">
 <li v-for="item in items" :key="item.id">
 {{ item.text }}
 </li>
</transition-group>

练习：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/animate.css" rel="stylesheet" />
		<style>
			.hello{
				width: 100px;
				height: 100px;
				background: blue;
				margin: 10px auto;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<input type="text" v-model="name" placeholder="输入一些字符,如果底下元素包含则显示" />
			<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
				<div v-for="(item,index) in arr2" class="hello" :key="index" v-show="show">
					{{item}}
				</div>
			</transition-group>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init();
			var vm = new Vue({
				el: "#content",
				data: {
					show: true,
					msg: "hello world!",
					arr: ['tom', 'jack', 'chaoyoung', 'mark', 'rose', 'curry'],
					name: ""
				},
				computed: { //利用计算属性,筛选真正需要显示的arr(也就是包含输入框里的字符的)
					arr2: function() {
						var temp = [];
						this.arr.forEach(value=>{
							if (value.includes(this.name)) {
								console.log('包含:' + '--' + value);
								temp.push(value);
							}
						})
						return temp;
					}
				},
				watch: {
					name: function(newValue, oldValue) {
						console.log("name变成了:" + newValue)
					}
				}
			})
		</script>
	</body>
</html>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011894号-2