如何在uni-app使用Transition为组件添加过度动画？

如果你错过一天，总有明天；如果你错过一年，也没关系，山不会去哪里，灌木也照样结出果实

基于上次的《盆友用Cursor 重构了我用uni-app写的Tab选项卡,UX交互效果拉满》学习到一个经典的动画效果后，又发现了一个vue的内置组件Transition

这意味着它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由v-if，v-show触发

基础

进入过渡类名

slide-fade-enter-from：在元素插入之前添加，元素插入完成后的下一帧移除。该类名用于定义进入动画的起始状态

slide-fade-enter-active：在元素被插入之前添加，过渡或动画完成之后移除。它应用于整个进入动画阶段，可用来定义进入动画的持续时间、延迟与速度曲线类型

slide-fade-enter-to：在元素插入完成后的下一帧添加（也就是 slide-fade-enter-from 被移除的同时），过渡或动画完成之后移除。用于定义进入动画的结束状态

离开过渡类名

 slide-fade-leave-from：在离开过渡效果被触发时立即添加，一帧后移除。用于定义离开动画的起始状态

slide-fade-leave-active：在离开过渡效果被触发时立即添加，过渡或动画完成之后移除。应用于整个离开动画阶段，可定义离开动画的持续时间、延迟与速度曲线类型

slide-fade-leave-to：在离开动画被触发后的下一帧添加（也就是 slide-fade-leave-from 被移除的同时），过渡或动画完成之后移除。用于定义离开动画的结束状态

案例

那如何在uni-app使用Transition为组件添加过度动画，我们在uni-app的tab选项卡上来一个案例

<template>
	<view>
		<!-- 选项卡 -->
		<view class="tab-view">
			<view :class="action == index ? 'tab-item-ac':'tab-item'" v-for="(item, index) in tab" @tap="tabTap(index)"
				:key="index">
				{{item}}
			</view>
		</view>
		
		<!-- 切换动画 -->
		<view v-for="(item, index) in list" :key="index">
			<transition name="slide-fade">
				<view class="list-view" v-if="action == index">
					<view class="list-centent">
						{{item.centent}}
					</view>
				</view>
			</transition>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: ['第一章', '第二章'],
				action: 0,
				list: [
					{centent: '第一章第一章第一章第一章'},
					{centent: '第二章第二章第二章第二章第二章'}
				]
			};
		},
		methods: {
			tabTap(e) {
				this.action = e;
			}
		}
	};
</script>

<style>
	/* 列表 */
	.list-centent{
		margin:0 30rpx;
		background-color: #55aaff;
		border-radius: 20rpx;
		overflow: hidden;
		padding: 30rpx;
	}
	.list-view {}

	/* 换动画 */
	.slide-fade-enter-active,
	.slide-fade-leave-active {
		transition: all 0.3s ease;
		position: absolute;
		width: 100%;
	}
	.slide-fade-enter-from {
		opacity: 0;
		transform: translateX(30rpx);
	}
	.slide-fade-leave-to {
		opacity: 0;
		transform: translateX(-30rpx);
	}

	/* 选项卡 */
	.tab-item-ac {
		background-color: #0055ff;
		padding: 30rpx 50rpx;
		border-radius: 20rpx;
		color: #ffffff;
	}
	.tab-item {
		background-color: #f5f5f5;
		padding: 30rpx 50rpx;
		border-radius: 20rpx;
	}
	.tab-view {
		margin: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
</style>

总结

适用于H5，小程序无法使用