Transition 动画

组件类型：WxTransitionComponentPublicInstance

动画组件。

平台兼容性

Android uni-app-x	iOS uni-app-x	web	小程序
√	×	√	×

基础用法

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<view class="wx-mt-30 wx-px-10">
			<view style="height: 125px;">
				<wx-transition :show="show" :mode="mode">
					<view class="content wx-flex wx-flex-center wx-items-center">
						<text style="color: #fff">示例元素</text>
					</view>
				</wx-transition>
			</view>
			<scroll-view :style="`height: ${height};`" class="wx-mt-40">
				<button class="" @click="switchMode('fade')">淡隐淡出</button>
				<button class="wx-mt-15" @click="switchMode('zoom')">缩放</button>
				<button class="wx-mt-15" @click="switchMode('fade-zoom')">缩放淡入</button>
				<button class="wx-mt-15" @click="switchMode('fade-up')">上滑淡入</button>
				<button class="wx-mt-15" @click="switchMode('fade-left')">左滑淡入</button>
				<button class="wx-mt-15" @click="switchMode('fade-right')">右滑淡入</button>
				<button class="wx-mt-15" @click="switchMode('fade-down')">下滑淡入</button>
				<button class="wx-mt-15" @click="switchMode('slide-up')">上滑进入</button>
				<button class="wx-mt-15" @click="switchMode('slide-left')">左滑进入</button>
				<button class="wx-mt-15" @click="switchMode('slide-down')">下滑进入</button>
				<button class="wx-mt-15" @click="switchMode('slide-right')">右滑进入</button>
			</scroll-view>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	let show = ref(false);
	let mode = ref('');
	let height = ref('');

	let switchMode = (modeStr : string)=>{
		mode.value = modeStr;
		show.value = !show.value;
	}

	onReady(()=>{
		show.value = true;
		const res = uni.getWindowInfo();
		height.value = res.screenHeight - 280 + 'px'
	})
</script>

<style lang="scss">
	.content {
		width: 125px; height: 125px;
		background-color: #3c9cff;
		margin: 0 auto;
		border-radius: 8px;
	}
</style>

API

Props

名称	类型	默认值	描述
mode	string	fade	动画模式
duration	number	300	动画时长(单位ms)
timingFunction	string	ease-out	过渡函数

mode

值名称	描述
fade	淡入
zoom	缩放
fade-zoom	缩放淡入
fade-up	上滑淡入
fade-left	左滑淡入
fade-right	右滑淡入
fade-right	下滑淡入
slide-up	上滑进入
slide-left	左滑进入
slide-down	下滑进入
slide-right	右滑进入

timingFunction

值名称	描述
ease	开始缓慢，然后逐渐加速，最后减速结束
ease-in	过渡开始时较慢，然后逐渐加速
ease-out	过渡开始时较快，然后逐渐减速
ease-in-out	过渡开始时较慢，然后加速，最后减速
linear	恒定速度，没有加速或减速
cubic-bezier	用于自定义 CSS 过渡（transition）的时间函数的函数，它允许你精确地定义过渡效果的速度变化

Events

名称	类型	默认值	描述
@before-enter	() => void	-	进入前触发
@enter	() => void	-	进入中触发
@after-enter	() => void	-	进入后触发
@before-leave	() => void	-	离开前触发
@leave	() => void	-	离开中触发
@after-leave	() => void	-	离开后触发

Slots

插槽名称	描述
default	默认插槽

演示效果