Vue中transition过渡效果

目录一，进入/离开过渡效果二，过渡效果的钩子函数三，过渡效果+Animate.css四，列表过渡一，进入/离开过渡效果进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果；如何使用过渡效果：利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住，然后书写对应的样式；过渡的类...

asdfsdgfsdgfa

4147人浏览 · 2019-09-16 14:25:43

asdfsdgfsdgfa · 2019-09-16 14:25:43 发布

一，进入/离开过渡效果

进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果；

如何使用过渡效果：利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住，然后书写对应的样式；

过渡的类名：过渡效果的样式是类样式，在进入/离开的过渡中有6个类样式的切换，分别是：

v-enter：定义进入过渡的开始状态；
v-enter-active：定义进入过渡生效状态，在这里可以定义进入过渡的时间、延迟、曲线函数等；
v-enter-to：定义进入过渡结束状态；
v-leave：定义离开过渡的开始状态；
v-leave-active：定义离开过渡生效状态，在这里可以定义离开过渡的时间、延迟、曲线函数等；
v-leave-to：定义离开过渡结束状态；

注意：在<transition name='fade'>中如果指定了name属性，过渡类名的v-要替换成name属性值；例如：fade-enter

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>12_Transition</title>
		<script type="text/javascript" src="../js/vue.js" ></script>

	</head>
	<body>
		<div id="sikiedu">
			<button @click="flag = !flag">显示/隐藏</button><br />
			<transition name='fade'>
				<div v-show='flag' class="mybtn"></div>
			</transition>
		</div>
	</body>
	<style type="text/css">
		.mybtn{
			width: 100px;
			height: 100px;
			background-color: red;
			transform: translateX(20px);
		}
		.fade-enter-active, .fade-leave-active{
			transition: all 1s;
		}
		.fade-enter{
			opacity: 0;
			transform: translateX(0px);
		}
		.fade-enter-to{
			opacity: 1;
			transform: translateX(20px);
		}
		.fade-leave{
			opacity: 1;
		}
		.fade-leave-to{
			opacity: 0;
			transform: translateX(0px);
		}
		
	</style>
	<script>
		let vm = new Vue({
			data : {
				flag : false
			}
		}).$mount('#sikiedu');
	
	</script>
</html>

二，过渡效果的钩子函数

过渡效果中也提供了对应的钩子函数，这些钩子函数需要在<transition>组件上绑定，然后再实现；

过渡效果的钩子函数有：

@before-enter=“beforeEnter“ ：进入过渡运行前
@enter=“enter“ ：进入过渡运行时
@after-enter=“afterEnter“ ：进入过渡运行后
@enter-cancelled=“enterCancelled“ ：进入过渡被打断时
@before-leave=“beforeLeave“ ：离开过渡运行前
@leave=“leave“ ：离开过渡运行时
@after-leave=“afterLeave“ ：离开过渡运行后
@leave-cancelled=“leaveCancelled“ ：离开过渡被打断时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>13_Transition_01</title>
		<script type="text/javascript" src="../js/vue.js" ></script>

	</head>
	<body>
		<div id="sikiedu">
			<button @click="flag = !flag">显示/隐藏</button><br />
			<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 v-show='flag' class="mybtn"></div>
			</transition>
		</div>
	</body>
	<style type="text/css">
		.mybtn{
			width: 100px;
			height: 100px;
			background-color: red;
			transform: translateX(20px);
		}
		.fade-enter-active, .fade-leave-active{
			transition: all 2s;
		}
		.fade-enter{
			opacity: 0;
			transform: translateX(0px);
		}
		.fade-enter-to{
			opacity: 1;
			transform: translateX(20px);
		}
		.fade-leave{
			opacity: 1;
		}
		.fade-leave-to{
			opacity: 0;
			transform: translateX(0px);
		}
		
	</style>
	<script>
		let vm = new Vue({
			data : {
				flag : false
			},
			methods : {
				beforeEnter(){
					alert("beforeEnter 进入过渡状态 开始 前");
				},
				enter(el){
					alert("enter 进入过渡状态 开始");
					setTimeout(()=>{
						el.style.backgroundColor = 'green';
					}, 1000);
				},
				afterEnter(){
					alert("afterEnter 进入过渡状态 结束");
				},
				enterCancelled(){
					alert("enterCancelled 进入过渡状态 被打断");
				},
				
				beforeLeave(){
					alert("beforeLeave 离开过渡状态 开始 前");
				},
				leave(el){
					alert("leave 离开过渡状态 开始");
					el.style.backgroundColor = 'red';
				},
				afterLeave(){
					alert("afterLeave 离开过渡状态 结束");
				},
				leaveCancelled(){
					alert("leaveCancelled 离开过渡状态 被打断");
				}
			}
		}).$mount('#sikiedu');
	
	</script>
</html>

三，过渡效果+Animate.css

Vue中的过渡效果也可以与其他第三方CSS动画库一起使用，例如Animate.css；

使用第三方动画库我们需要用到自定义过渡类名：

enter-class；
enter-active-class；
enter-to-class；
leave-class；
leave-active-class；
leave-to-class；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>14_Transition_02</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<link rel="stylesheet" type="text/css" href="../css/animate.css"/>
	</head>
	<body>
		<div id="sikiedu">
			<button @click="flag = !flag">显示/隐藏</button><br />
			<transition name='fade'
				enter-to-class='animated zoomInDown'	
				leave-to-class='animated zoomOutUp'	
			>
				<div v-show='flag' class="mybtn"></div>
			</transition>
		</div>
	</body>
	<style type="text/css">
		.mybtn{
			width: 100px;
			height: 100px;
			background-color: red;
			transform: translateX(20px);
		}
		.fade-enter-active, .fade-leave-active{
			transition: all 2s;
		}
		.fade-enter{
			opacity: 0;
			transform: translateX(0px);
		}
		.fade-enter-to{
			opacity: 1;
			transform: translateX(20px);
		}
		.fade-leave{
			opacity: 1;
		}
		.fade-leave-to{
			opacity: 0;
			transform: translateX(0px);
		}
		
	</style>
	<script>
		let vm = new Vue({
			data : {
				flag : false
			}
		}).$mount('#sikiedu');
	
	</script>
</html>

四，列表过渡

之前我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<transition-group>这个组件了；

如何使用：将要操作的列表元素放在<transition-group></transition-group>内，其他与<transition>基本一致；

注意：在<transition-group>的元素要指定个唯一的 :key 属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>15_Transition_Group</title>
		<script type="text/javascript" src="../js/vue.js" ></script>

	</head>
	<body>
		<div id="sikiedu">
			<button @click="addNum">添加数字</button><br />
			<transition-group name='fade' tag='ul'>
				<li v-for='(item,index) in numArray' :key='item'>
					{{item}}
					<button @click='removeNum(index)'> - </button>
				</li>
			</transition-group>
		</div>
	</body>
	<style type="text/css">
		.mybtn{
			width: 100px;
			height: 100px;
			background-color: red;
			transform: translateX(20px);
		}
		.fade-enter-active, .fade-leave-active{
			position: absolute;
			transition: all .5s;
		}
		.fade-enter{
			opacity: 0;
			transform: translateX(-20px);
		}
		.fade-enter-to{
			opacity: 1;
		}
		.fade-leave{
			opacity: 1;
		}
		.fade-leave-to{
			opacity: 0;
			transform: translateX(20px);
		}
		.fade-move{
			transition: transform .5s;
		}
		
	</style>
	<script>
		let vm = new Vue({
			data : {
				flag : false,
				a : '1',
				b : '1',
				numArray : [1, 2, 3, 4, 5]
			},
			methods : {
				addNum(){
					let num = Math.ceil(Math.random() * 100);
					this.numArray.push(num);
				},
				removeNum(index){
					this.numArray.splice(index, 1);
				}
			}
		}).$mount('#sikiedu');
	
	</script>
</html>

过渡效果2：

<transition name="slide-fade">
    <router-view></router-view>
</transition>

style

.slide-fade{
  position: absolute;left:0;right: 0;
}
.slide-fade-enter-active {
  transition: all 0.8s ease;

}
.slide-fade-leave-active {
  transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
{
  left:0;right: 0;
  transform: translateY(-10px);
  opacity: 0;
}

效果：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

asdfsdgfsdgfa

@qq_40323256

已为社区贡献65条内容