Initial commit of akmon project

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

@@ -0,0 +1,97 @@
+<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, UseTransitionOptions, 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>