gxt_app/uni_modules/lime-transition/components/l-transition/l-transition.uvue

<template>
	<view class="l-transition l-class" 
		ref="rootRef"
		v-if="destoryOnClose ? display && inited : inited"
		:class="[lClass, classes]" 
		:style="[styles, lStyle]"
		@transitionend="finished">
		<slot/>
	</view>
</template>

<script lang="uts" setup>
	/**
	 * Transition 过渡动画组件
	 * @description 用于实现元素显示/隐藏的过渡动画效果，支持自定义动画类名和参数
	 * <br>插件类型：LTransitionComponentPublicInstance 
	 * @tutorial https://ext.dcloud.net.cn/plugin?name=lime-transition
	 * 
	 * @property {boolean} appear 初始渲染是否应用动画（默认：false）
	 * @property {string} lClass 自定义容器类名
	 * @property {string} lStyle 自定义容器样式（CSS字符串）
	 * @property {boolean} destoryOnClose 隐藏时销毁内容（默认：false）
	 * @property {number} zIndex 层级（默认：100）
	 * @property {number} duration 过渡持续时间（ms，默认：300）
	 * @property {string} name 基础过渡类名前缀（默认："fade"）
	 * @property {boolean} visible 是否显示（支持v-model）
	 * @property {string} enterClass 进入动画初始状态类名
	 * @property {string} enterActiveClass 进入动画激活状态类名
	 * @property {string} enterToClass 进入动画结束状态类名
	 * @property {string} leaveClass 离开动画初始状态类名
	 * @property {string} leaveActiveClass 离开动画激活状态类名
	 * @property {string} leaveToClass 离开动画结束状态类名
	 * @event {Function} before-enter 进入动画开始前触发
	 * @event {Function} enter 进入动画开始触发
	 * @event {Function} after-enter 进入动画完成后触发
	 * @event {Function} before-leave 离开动画开始前触发
	 * @event {Function} leave 离开动画开始触发
	 * @event {Function} after-leave 离开动画完成后触发
	 */
	
	
	import { useTransition, type UseTransitionOptions, type TransitionEmitStatus } from '@/uni_modules/lime-transition';
	import { TransitionProps } from './type';
	
	const emit = defineEmits(['before-enter', 'enter', 'after-enter', 'before-leave', 'leave', 'after-leave'])
	const props = withDefaults(defineProps<TransitionProps>(), {
		appear: false,
		destoryOnClose: false,
		zIndex: 11000,
		duration: 300,
		name: 'fade', // transition
		visible: false,
		enterClass : '',
		enterActiveClass : '',
		enterToClass : '',
		leaveClass : '',
		leaveActiveClass : '',
		leaveToClass : ''
	})
	const rootRef = ref<UniElement|null>(null)
	const {inited, display, classes, finished} = useTransition({
		element: rootRef,
		defaultName: 'fade',
		name: (): string => props.name,
		emits: (name:TransitionEmitStatus) => { emit(name) },
		visible: (): boolean => props.visible,
		enterClass: props.enterClass,
		enterActiveClass: props.enterActiveClass,
		enterToClass: props.enterToClass,
		leaveClass: props.leaveClass,
		leaveActiveClass: props.leaveActiveClass,
		leaveToClass: props.leaveToClass,
		appear: props.appear,
		duration: props.duration,
	} as UseTransitionOptions)

	const styles = computed(():Map<string, any>=>{
		const style = new Map<string, any>()
		style.set('transition-duration', props.duration + 'ms')
		style.set('z-index', props.zIndex)
		// if (!display.value) {
		// 	style.set("display", "none")
		// }
		return style
	})
	
	// watchEffect(()=>{
	// 	console.log('inited', inited.value)
	// 	console.log('display', display.value)
	// 	console.log('classes', classes.value)
		
	// })
		
</script>
<style lang="scss">
	@import './index';
</style>