Initial commit of akmon project

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

@@ -0,0 +1,92 @@
+<template>
+	<view class="l-transition l-class"
+		v-if="destoryOnClose ? display && inited : inited"
+		:class="[lClass, classes]" 
+		:style="styles + lStyle"
+		@transitionend="finished">
+		<slot/>
+	</view>
+</template>
+<script lang="ts">
+	// @ts-nocheck
+	/**
+	 * 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 { computed, defineComponent} from '@/uni_modules/lime-shared/vue';
+	import { useTransition, UseTransitionOptions } from '@/uni_modules/lime-transition';
+	import transitionsProps from './props';
+	
+	export default defineComponent({
+		props: transitionsProps,
+		options: {
+			styleIsolation: "apply-shared",
+			addGlobalClass: true,
+			externalClasses: true,
+			virtualHost: true,
+		},
+		externalClasses: ['l-class'],
+		emits: ['before-enter', 'enter', 'after-enter', 'before-leave', 'leave', 'after-leave'],
+		setup(props, {emit}) {
+
+			const {inited, display, classes, finished, toggle} = useTransition({
+				name: (): string => props.name,
+				emits: (name:string) => {
+					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(()=>{
+				let style = `transition-duration:${props.duration}ms; z-index:${props.zIndex};`
+				if (!display.value) {
+					style+=`display:none;`
+				}
+				return style
+			})
+			
+			return {
+				inited,
+				styles,
+				display,
+				classes,
+				finished
+			}
+		}
+	})
+	
+</script>
+<style lang="scss">
+ @import './index';
+</style>