Transition 过渡动画

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='动画'>
		<t-card class="m.30" title="Transtion 过渡动画"
			sub-title="集合常用动画特效，使页面之间的切换更加流畅和自然。它可以实现多种动画效果，例如淡入淡出、滑动、缩放等。增强用户体验，使页面之间的切换更加有趣和吸引力。"></t-card>
		<t-transition :show="fadein" :mode="mode" class="fc-mt.30-z.999">
			<t-row class="twh.150-r.10-bg.#4cd964;"></t-row>
		</t-transition>
		<t-col class='fc-p.30'>
			<t-transition mode="cursor" :show="true">
				<t-row class="w.5-h.30-bg.#f56c6c"></t-row>
			</t-transition>
		</t-col>
		<t-col class="p.30">
			<t-button class="mb.20" @click="onButtonClick('fade')" type="primary">渐隐渐显</t-button>
			<t-button class="mb.20" @click="onButtonClick('fade-up')" type="primary">上方进出</t-button>
			<t-button class="mb.20" @click="onButtonClick('fade-down')" type="primary">下方进出</t-button>
			<t-button class="mb.20" @click="onButtonClick('fade-left')" type="primary">左方进出</t-button>
			<t-button class="mb.20" @click="onButtonClick('fade-right')" type="primary">右方进出</t-button>
			<t-button class="mb.20" @click="onButtonClick('zoom')" type="primary">缩放</t-button>
			<t-button class="mb.20" @click="onButtonClick('button')" type="primary">按钮点击效果</t-button>
		</t-col>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				fadein: true,
				mode: 'fade'
			};
		},
		methods: {
			onButtonClick(type : string) {
				this.mode = type
				this.fadein = !this.fadein
			}
		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
show	是否展示组件	Boolean	true	-
mode	使用的动画模式	String	''	'fade', 'fade-up', 'fade-down', 'fade-left', 'fade-right', 'zoom', 'button', 'cursor'
duration	动画的执行时间，单位ms	Number	500	-
timingFunction	使用的动画过渡函数	String	'ease-in-out'	-
transformOrigin	变换原点	String	'50% 50%'	-

Events

事件名	描述	回调参数	版本
-	-	-	-