Vue 中同时使用过渡和动画

在上篇博客中，完成了引入 animate.css 库且实现动画的效果，但发现，在刚开始时元素并没有动画效果

若想让元素刚开始时也具备动画效果，则

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中同时使用过渡和动画</title>
	<script src='./vue.js'></script>
	<link rel="stylesheet" href="../css/animate.css" />
	
</head>
<body>
	<div id ="root">
		<transition name="fade"
			appear
			enter-active-class="animated swing"
			leave-active-class="animated shake"
			appear-active-class="animated swing">
			<div v-if="show">hello world</div>
		</transition>

		<button @click="handleClick">切换</button>

	</div>
	<script>
		var vm = new Vue({
			el:'#root',
			data: {
				show:true
			},
			methods:{
				handleClick: function(){
					this.show = !this.show
				}
			}
		})
	</script>
</body>
</html>

在刚开始时就会有动画效果

输出：上下抖动---正常--- 左右抖动---消失---上下抖动---正常

引入 animate.css 库实质还是 @keyframe（CSS3）的形式，如果想将其和过渡效果同时展现出来，则

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中同时使用过渡和动画</title>
	<script src='./vue.js'></script>
	<link rel="stylesheet" href="../css/animate.css" />
	<style>
		.fade-enter,
		.fade-leave-to{
			opacity: 0;
		}
		
		.fade-enter-active,
		.fade-leave-active{
			transition: opacity 3s;
		}
	</style>
</head>
<body>
	<div id ="root">
		<transition name="fade"
			appear
			enter-active-class="animated swing fade-enter-active"
			leave-active-class="animated shake fade-leave-active"
			appear-active-class="animated swing">
			<div v-if="show">hello world</div>
		</transition>

		<button @click="handleClick">切换</button>

	</div>
	<script>
		var vm = new Vue({
			el:'#root',
			data: {
				show:true
			},
			methods:{
				handleClick: function(){
					this.show = !this.show
				}
			}
		})
	</script>
</body>
</html>

输出：上下抖动---正常--- 左右抖动---（逐渐）消失---上下抖动---（逐渐）正常

但有个问题，设置 transition: opacity 3s; 是3秒；但知 swing 和 shake 都是 1秒；会导致冲突，则添加 type="transition"，以较长的时间的时长为准

<div id ="root">
		
		<transition 
			type="transition"
			name="fade"
			appear
			enter-active-class="animated swing fade-enter-active"
			leave-active-class="animated shake fade-leave-active"
			appear-active-class="animated swing">
			<div v-if="show">hello world</div>
		</transition>

还可以自定义播放时长： :duration="5000" 5秒

扫描二维码关注公众号，回复： 2538784 查看本文章

<div id ="root">
		
		<transition 
			:duration="5000"  
			name="fade"
			appear
			enter-active-class="animated swing fade-enter-active"
			leave-active-class="animated shake fade-leave-active"
			appear-active-class="animated swing">
			<div v-if="show">hello world</div>
		</transition>

复杂一些：：duration="{enter:5000,leave:10000}" 入场5秒，离厂10秒

初识 Vue---（Vue 中同时使用过渡和动画）

Vue 中同时使用过渡和动画

猜你喜欢