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

最新推荐文章于 2024-07-13 16:31:11 发布

姜皓

最新推荐文章于 2024-07-13 16:31:11 发布

阅读量341

点赞数 1

分类专栏： # Vue 前端 # 从浅入深学 Vue

本文链接：https://blog.csdn.net/jianghao233/article/details/81321465

版权

Vue 同时被 3 个专栏收录

28 篇文章 1 订阅

订阅专栏

从浅入深学 Vue

28 篇文章 8 订阅

订阅专栏

前端

22 篇文章 1 订阅

订阅专栏

本文介绍了如何在 Vue 中同时使用过渡和动画，确保元素在初次出现时也能有动画效果。通过调整 CSS3 动画和 transition 的配合，解决时间长度不一致导致的冲突，并展示了如何自定义过渡时长，包括入场和离场的不同时长。

摘要由CSDN通过智能技术生成

Vue 中同时使用过渡和动画

在上篇博客《Vue 中使用 animate.css 库》基础上开始这篇博客

在上篇博客中，完成了引入 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秒

<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秒