Vue中动画与过渡的使用教程

时间:2023-02-02 酷尔。人气:0

前言

本篇博客将会介绍如何在Vue中使用动画效果。

一、回忆css3中的动画

定义一个动画：

定义一个动画名为atguigu
@keyframes atguigu {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}

使用动画

h1 {
  text-align: center;
  background-color: rgba(0, 217, 255, 0.897);
}
将动画使用到come类中
.come {
  animation: atguigu 0.5s linear;
}
将动画atguigu的相反使用到to类中
.to {
  animation: atguigu 0.5s linear reverse;
}

animation: name duration timing-function delay iteration-count direction fill-mode;

二、Vue中单标签使用动画

vue中定义动画使用，需要将响应标签放入标签 <transition></transition>中

若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

1.默认使用方法

这种方法只适用于一个插件只有一个动画效果，因为没有办法对动画进行区分

元素进入的样式：

v-enter：进入的起点
v-enter-active：进入过程中
v-enter-to：进入的终点

元素离开的样式：

v-leave：离开的起点
v-leave-active：离开过程中
v-leave-to：离开的终点

可以结合以下一个实例使用：

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		//appear 属性加上会在页面加载时执行动画
		<transition appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>
<script>
	export default {
		name:'Hello',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>
<style scoped>
	h1{
		background-color: orange;
	}
	//展示标签时激活
	.v-enter-active{
		animation: atguigu 0.5s linear;
	}
	//不展示标签时激活
	.v-leave-active{
		animation: atguigu 0.5s linear reverse;
	}
	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

2.自定义使用方法

这种方法较为灵活，一个插件可以定义多个动画，并用定义的名字进行区分，用法如下：

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		//给标签指定一个名字
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>
<script>
	export default {
		name:'Hello',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>
<style scoped>
	h1{
		background-color: orange;
	}
	//这里的写法有所改变，应为.name-enter-activate.....
	.hello-enter-active{
		animation: atguigu 0.5s linear;
	}
	.hello-leave-active{
		animation: atguigu 0.5s linear reverse;
	}
	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

三、Vue中多标签实现动画效果

上面介绍到的transition只能用于包裹一个标签，如果包裹多个标签的话就会报错。如果想要包裹多个标签可以使用transition-group。除了使用定义的动画，还可以使用过渡效果实现动画。

具体的使用方法如下：

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		//里面的两个h1均由动画效果
		<transition-group name="hello" appear>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>
</template>
<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>
<style scoped>
	h1{
		background-color: orange;
	}
	//Vue 会在指定的时期，将相应的动画效果展示出来，我们只用这样写即可。
	/* 进入的起点、离开的终点 */
	.hello-enter,.hello-leave-to{
		transform: translateX(-100%);
	}
	/* 进入的终点、离开的起点 */
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
</style>

四、使用第三方动画

市面上有许多优秀的动画库，我们在使用的时候只需进行一些简单的配置就可以使用。

下面有一个案例，是使用的animate.css动画库可以参考一下：

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group 
			appear
			//下面三行为官网给出的配置
			name="animate__animated animate__bounce" 
			//这里就是显示组件跟隐藏组件时的动画
			//等号后面的东西直接去官网找自己想要的效果然后把名称复制上去即可
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>
</template>
<script>
	import 'animate.css'
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>
<style scoped>
	h1{
		background-color: orange;
	}
</style>

加载全部内容