Vue框架之过渡与动画

菠萝少年学前端

已于 2023-04-19 14:50:39 修改

阅读量155

点赞数

文章标签： vue.js javascript 前端

于 2023-04-19 11:47:36 首次发布

本文链接：https://blog.csdn.net/qq_53050456/article/details/130239561

版权

文章介绍了如何在Vue.js中使用transition和transition-group组件来实现元素的进入、离开动画，包括定义自己的CSS动画和利用animate.css库创建动态效果。同时提到了appear属性在多元素过渡时的作用。

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

1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2. 图示：

3. 写法：

3.1. 准备好样式：

- 元素进入的样式：

1. v-enter：进入的起点

2. v-enter-active：进入过程中

3. v-enter-to：进入的终点

- 元素离开的样式：

1. v-leave：离开的起点

2. v-leave-active：离开过程中

3. v-leave-to：离开的终点

3.2. 使用```<transition>```包裹要过度的元素，并配置name属性：

      ```vue

      <transition name="hello">

         <h1 v-show="isShow">你好啊！</h1>

      </transition>

      ```

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

示例代码：

Test子组件：

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
    //进入时
	.hello-enter-active{
		animation: atguigu 0.5s linear;
	}
    //离开时
	.hello-leave-active{
		animation: atguigu 0.5s linear reverse;
	}
    //定义动画atguigu
	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

Test2子组件：

注意：此时transition-group中的appear会在页面渲染时参与到渲染的过程

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
        //多个元素过渡时要使用transition-group
		<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;
	}
	/* 进入的起点、离开的终点 */
	.hello-enter,.hello-leave-to{
		transform: translateX(-100%);
	}
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
	/* 进入的终点、离开的起点 */
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}

</style>

注意：当然也不止可以自己去写动画，也可以把它交给第三方库，此处推荐的库是animate.css,它是一个动画库，根据它提供的动画样式及名字去合理的使用动画。

相应用法可以参考：animate.css

Test3子组件就用到了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>