h5-elab-open-ownerUnion/pages/extUI/transition/transition.vue

<template>
	<view>
		<uni-card is-full :is-shadow="false">
			<text class="uni-h6">过渡动画，通常用于元素的过渡效果，例如淡隐淡出效果，遮罩层的效果、放大缩小的效果等</text>
		</uni-card>
		<uni-section title="示例" type="line">
			<view class="example">
				<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles" :show="show"><text class="text">示例元素</text></uni-transition>
			</view>
		</uni-section>

		<uni-section title="操作" subTitle="点击按钮 ,切换动画效果" type="line">
			<view class="example-body">
				<button class="transition-button" type="primary" @click="handle('fade')">淡隐淡出</button>
				<button class="transition-button" type="primary" @click="handle(['fade', 'slide-top'])">由上至下</button>
				<button class="transition-button" type="primary" @click="handle(['fade', 'slide-right'])">由右至左过</button>
				<button class="transition-button" type="primary" @click="handle(['fade', 'zoom-in'])">由小到大过</button>
				<button class="transition-button" type="primary" @click="custom">自定义动画</button>
			</view>
		</uni-section>

	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			show: true,
			modeClass: 'fade',
			styles: {}
		}
	},
	onLoad() {
		// #ifdef APP-NVUE
		this.styles = {
			justifyContent: 'center',
			alignItems: 'center',
			width: '100px',
			height: '100px',
			borderRadius: '5px',
			textAlign: 'center',
			backgroundColor: '#4cd964',
			boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
		}
		// #endif
	},
	methods: {
		handle(type) {
			this.show = !this.show
			this.modeClass = type
		},
		custom() {
			// TODO 下面修改宽高在百度下还有些问题待修复
			// this.$refs.ani.step({
			// 	width: '200px'
			// })
			// this.$refs.ani.step({
			// 	height: '150px'
			// },{
			// 	delay:100,
			// 	duration:200
			// })
			this.$refs.ani.step(
				{
					width: '100px',
					height: '100px',
					rotate: '180'
				},
				{
					delay: 200,
					duration: 300
				}
			)
			this.$refs.ani.step(
				{
					width: '100px',
					height: '100px',
					rotate: '0'
				},
				{
					transformOrigin: '50% 50%'
				}
			)

			this.$refs.ani.step(
				{
					translateX: '-100px'
				},
				{
					timingFunction: 'ease-in',
					duration: 100
				}
			)

			this.$refs.ani.step(
				{
					translateX: '100px'
				},
				{
					timingFunction: 'ease',
					duration: 300
				}
			)

			this.$refs.ani.step(
				{
					translateX: '50px',
					scale: 1.5
				},
				{
					timingFunction: 'linear',
					duration: 100
				}
			)
			this.$refs.ani.step(
				{
					translateX: '0px',
					scale: 1
				},
				{
					timingFunction: 'linear',
					duration: 150
				}
			)

			this.$refs.ani.run()
		}
	}
}
</script>

<style lang="scss" scoped>
.example {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	height: 150px;
	background-color: #fff;
}
.example-body {
	padding: 10px 20px;
	padding-bottom: 0px;
}
.transition-button {
	/* #ifndef APP-NVUE */
	width: 100%;
	/* #endif */
	flex: 1;
	margin-bottom: 10px;
}

/* #ifndef APP-NVUE */
.example ::v-deep .transition {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	border-radius: 5px;
	text-align: center;
	background-color: #4cd964;
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
}
/* #endif */

.text {
	font-size: 14px;
	color: #fff;
}
</style>