Transition 过渡动画

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="动画">
		<!-- 渐隐渐现 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<view class="animation-item" @tap="handleAnimation(animationList[0])">

				<zk-button type="primary" :text="animationList[0].label"></zk-button>
			</view>
		</zk-theme>

		<!-- 上滑入场 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<view class="animation-item" @tap="handleAnimation(animationList[1])">
				<zk-button type="primary" :text="animationList[1].label"></zk-button>
			</view>
		</zk-theme>

		<!-- 下滑入场 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<view class="animation-item" @tap="handleAnimation(animationList[2])">
				<zk-button type="primary" :text="animationList[2].label"></zk-button>
			</view>
		</zk-theme>

		<!-- 左滑入场 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<view class="animation-item" @tap="handleAnimation(animationList[3])">
				<zk-button type="primary" :text="animationList[3].label"></zk-button>
			</view>
		</zk-theme>

		<!-- 右滑入场 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<view class="animation-item" @tap="handleAnimation(animationList[4])">
				<zk-button type="primary" :text="animationList[4].label"></zk-button>
			</view>
		</zk-theme>

		<!-- 上滑淡入 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<view class="animation-item" @tap="handleAnimation(animationList[5])">
				<zk-button type="primary" :text="animationList[5].label"></zk-button>
			</view>
		</zk-theme>

		<!-- 下滑淡入 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<view class="animation-item" @tap="handleAnimation(animationList[6])">
				<zk-button type="primary" :text="animationList[6].label"></zk-button>
			</view>
		</zk-theme>

		<!-- 左滑淡入 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<view class="animation-item" @tap="handleAnimation(animationList[7])">
				<zk-button type="primary" :text="animationList[7].label"></zk-button>
			</view>
		</zk-theme>

		<!-- 右滑淡入 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<view class="animation-item" @tap="handleAnimation(animationList[8])">
				<zk-button type="primary" :text="animationList[8].label"></zk-button>
			</view>
		</zk-theme>

		<!-- 缩放动画 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<view class="animation-item" @tap="handleAnimation(animationList[9])">
				<zk-button type="primary" :text="animationList[9].label"></zk-button>
			</view>
		</zk-theme>

		<!-- 缩放淡入 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<view class="animation-item" @tap="handleAnimation(animationList[10])">
				<zk-button type="primary" :text="animationList[10].label"></zk-button>
			</view>
		</zk-theme>

		<zk-transition :show="isShow" :mode="currentMode" :custom-style="boxStyle" @click="handleClick"
			@before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave"
			@leave="onLeave" @after-leave="onAfterLeave">
			<view class="animation-box" :style="[animationColor]"></view>
		</zk-transition>
	</zk-theme>
</template>

<script>
	const ANIMATION_DURATION = 1500;
	const BOX_SIZE = 100;

	export default {
		name: 'ZkTransitionDemo',
		data() {
			const systemInfo = uni.getSystemInfoSync();
			return {
				isShow: false,
				currentMode: '',
				animationColor: {
					backgroundColor: this.getRandomColor()
				},
				boxStyle: {
					position: 'fixed',
					top: `${systemInfo.windowHeight / 2 - BOX_SIZE / 2}px`,
					left: `${systemInfo.windowWidth / 2 - BOX_SIZE / 2}px`,
					width: `${BOX_SIZE}px`,
					height: `${BOX_SIZE}px`,
				},
				animationList: [{
						type: 'fade',
						label: '渐隐渐现',

					},
					{
						type: 'slide-up',
						label: '上滑入场',

					},
					{
						type: 'slide-down',
						label: '下滑入场',

					},
					{
						type: 'slide-left',
						label: '左滑入场',

					},
					{
						type: 'slide-right',
						label: '右滑入场',

					},
					{
						type: 'fade-up',
						label: '上滑淡入',

					},
					{
						type: 'fade-down',
						label: '下滑淡入',

					},
					{
						type: 'fade-left',
						label: '左滑淡入',

					},
					{
						type: 'fade-right',
						label: '右滑淡入',

					},
					{
						type: 'zoom',
						label: '缩放动画',

					},
					{
						type: 'fade-zoom',
						label: '缩放淡入',

					}
				]
			}
		},
		methods: {
			// 处理动画展示
			handleAnimation(animation) {
				this.currentMode = animation.type;
				this.animationColor.backgroundColor = this.getRandomColor();
				this.isShow = true;

				setTimeout(() => {
					this.isShow = false;
				}, ANIMATION_DURATION);
			},

			// 生成随机颜色
			getRandomColor() {
				const colors = ['#2979ff', '#19be6b', '#ff9900', '#fa3534', '#909399', '#9c27b0'];
				return colors[Math.floor(Math.random() * colors.length)];
			},

			// 动画事件处理
			handleClick() {
				this.$emit('animation-click');
			},
			onBeforeEnter() {
				this.$emit('animation-before-enter');
			},
			onEnter() {
				this.$emit('animation-enter');
			},
			onAfterEnter() {
				this.$emit('animation-after-enter');
			},
			onBeforeLeave() {
				this.$emit('animation-before-leave');
			},
			onLeave() {
				this.$emit('animation-leave');
			},
			onAfterLeave() {
				this.$emit('animation-after-leave');
			}
		}
	}
</script>

<style lang="scss">
	.animation-item {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		&:active {
			opacity: 0.7;
		}
	}

	.animation-content {
		flex-direction: row;
		align-items: center;
	}

	.animation-box {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
		/* #ifndef APP-NVUE */
		transition: background-color 0.3s;
		/* #endif */
	}

	/* #ifdef APP-NVUE */
	.animation-item {
		width: 662rpx;
	}

	/* #endif */
</style>