XJT778/1XJT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first save

Browse Source
This commit is contained in:
jackey
2025-11-12 15:08:51 +08:00
commit c66fc54821
2885 changed files with 339178 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
scoring/uni_modules/lime-transition/changelog.md Normal file
View File

@@ -0,0 +1,32 @@
## 0.1.7（2025-09-15）
- feat: 增加删除class配置
## 0.1.6（2025-08-13）
- fix: 修复uniappx 把type 当变量的问题
## 0.1.5（2025-08-13）
- fix: 修复uniapp 把type 当变量的问题
## 0.1.4（2025-05-30）
- fix: 修复uniappx ios真机不过渡的问题
## 0.1.3（2025-05-30）
- chore: 更新文档
## 0.1.1（2025-05-30）
- fix: 修复ios可能不过渡的问题
## 0.1.0（2025-05-13）
- fix: 修复uniapp vue2 app无法watch的问题，更换方式
## 0.0.9（2025-04-23）
- fix: 修复uniapp缺少nextTick问题
## 0.0.8（2025-04-23）
- feat: 兼容uniappx 鸿蒙next
## 0.0.7（2025-01-22）
- fix: 优化快速切换时闪烁问题
## 0.0.6（2025-01-17）
- fix: 小程序由于时间不够可能无过度问题
## 0.0.5（2025-01-16）
- feat: 增加onNextTick
## 0.0.4（2025-01-01）
- feat: 优化小程序
## 0.0.3（2024-10-24）
- chore: 缺少emit
## 0.0.2（2024-10-24）
- feat: 兼容vue2
## 0.0.1（2024-10-24）
- init

82
scoring/uni_modules/lime-transition/components/l-transition/index.scss Normal file
View File

@@ -0,0 +1,82 @@
.l-transition {
transition-timing-function: ease;
// transition-duration: 3000ms;
transform: translate(0, 0);
opacity: 1;
}
.l-fade-enter-active,
.l-fade-leave-active {
transition-property: opacity;
}
.l-fade-enter,
.l-fade-leave-to {
opacity: 0;
}
.l-fade-up-enter-active,
.l-fade-up-leave-active,
.l-fade-down-enter-active,
.l-fade-down-leave-active,
.l-fade-left-enter-active,
.l-fade-left-leave-active,
.l-fade-right-enter-active,
.l-fade-right-leave-active {
transition-property: opacity, transform;
}
.l-fade-up-enter,
.l-fade-up-leave-to {
transform: translate(0, 100%);
opacity: 0;
}
.l-fade-down-enter,
.l-fade-down-leave-to {
transform: translate(0, -100%);
opacity: 0;
}
.l-fade-left-enter,
.l-fade-left-leave-to {
transform: translate(-100%, 0);
opacity: 0;
}
.l-fade-right-enter,
.l-fade-right-leave-to {
transform: translate(100%, 0);
opacity: 0;
}
.l-slide-up-enter-active,
.l-slide-up-leave-active,
.l-slide-down-enter-active,
.l-slide-down-leave-active,
.l-slide-left-enter-active,
.l-slide-left-leave-active,
.l-slide-right-enter-active,
.l-slide-right-leave-active {
transition-property: transform;
}
.l-slide-up-enter,
.l-slide-up-leave-to {
transform: translate(0, 100%);
}
.l-slide-down-enter,
.l-slide-down-leave-to {
transform: translate(0, -100%);
}
.l-slide-left-enter,
.l-slide-left-leave-to {
transform: translate(-100%, 0);
}
.l-slide-right-enter,
.l-slide-right-leave-to {
transform: translate(100%, 0);
}

97
scoring/uni_modules/lime-transition/components/l-transition/l-transition.uvue Normal file
View File

@@ -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, 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>

92
scoring/uni_modules/lime-transition/components/l-transition/l-transition.vue Normal file
View File

@@ -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, type 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>

35
scoring/uni_modules/lime-transition/components/l-transition/props.ts Normal file
View File

@@ -0,0 +1,35 @@
export default {
appear: {
type: Boolean,
default: false
},
destoryOnClose: {
type: Boolean,
default: false
},
duration: {
type: [Number, Array],
default: 300
},
zIndex: {
type: Number,
default: 11000
},
name: {
type: String,
default: 'fade'
},
visible: {
type: Boolean,
default: false
},
lClass: String,
lStyle: String,
enterClass: String,
enterActiveClass: String,
enterToClass: String,
leaveClass: String,
leaveActiveClass: String,
leaveToClass: String,
}

38
scoring/uni_modules/lime-transition/components/l-transition/type.ts Normal file
View File

@@ -0,0 +1,38 @@
// @ts-nocheck
export interface TransitionProps {
/**
* 首次出现是否展示动画
*/
appear : boolean;
/**
* 自定义容器类名
*/
lClass ?: string;
lStyle ?: string;
/**
* 隐藏时是否销毁内容
*/
destoryOnClose : boolean;
/**
* 层级
*/
zIndex: number;
/**
* 指定过渡时间
*/
duration : number;
/**
* 过渡类名
*/
name : string;
/**
* 是否显示
*/
visible : boolean;
enterClass: string;
enterActiveClass: string;
enterToClass: string;
leaveClass: string;
leaveActiveClass: string;
leaveToClass: string;
};

161
scoring/uni_modules/lime-transition/components/lime-transition/lime-transition.uvue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<view class="demo-block">
<text class="demo-block__title-text ultra">Transition 动画</text>
<text class="demo-block__desc-text">使元素从一种样式逐渐变化为另一种样式的效果。</text>
<view class="demo-block__body">
<view class="demo-block">
<text class="demo-block__title-text large">基础使用</text>
<view class="demo-block__body">
<l-transition :visible="true" :appear="true" name="fade-up">
<view class="box1">内容</view>
</l-transition>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text large">动画类型</text>
<view class="demo-block__body">
<button style="margin-bottom:20rpx" @click="onClick('fade')">Fade</button>
<button style="margin-bottom:20rpx" @click="onClick('fade-up')">Fade Up</button>
<button style="margin-bottom:20rpx" @click="onClick('fade-down')">Fade Down</button>
<button style="margin-bottom:20rpx" @click="onClick('fade-left')">Fade Left</button>
<button style="margin-bottom:20rpx" @click="onClick('fade-right')">Fade Right</button>
<button style="margin-bottom:20rpx" @click="onClick('slide-up')">Slide Up</button>
<button style="margin-bottom:20rpx" @click="onClick('slide-down')">Slide Down</button>
<button style="margin-bottom:20rpx" @click="onClick('slide-left')">Slide Left</button>
<button style="margin-bottom:20rpx" @click="onClick('slide-right')">slide right</button>
<l-transition :visible="visible" :destoryOnClose="true" :name="name" class="box">
<view class="content">内容1</view>
</l-transition>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text large">高级用法</text>
<view class="demo-block__body">
<l-transition
:visible="show"
name=""
:duration="1000"
enter-class="custom-enter-class"
enter-active-class="custom-enter-active-class"
leave-active-class="custom-leave-active-class"
leave-to-class="custom-leave-to-class"
class="box">
<view class="content">内容</view>
</l-transition>
<button @click="toggle">切换</button>
</view>
</view>
</view>
</view>
</template>
<script lang="uts" setup>
let timer : number = -1;
const visible = ref(false);
const show = ref(false);
const name = ref('');
const toggle = () => {
show.value = !show.value
}
const onClick = (v : string) => {
if (v.length > 0) {
clearTimeout(timer)
name.value = v;
visible.value = true;
timer = setTimeout(() => {
visible.value = false;
}, 600)
}
}
</script>
<style lang="scss">
$card-bg-color: var(--doc-card-bg-color, white);
// $page-bg-color: var(--doc-page-bg-color, #f5f5f5);
$title-color: var(--doc-title-color, #000000E6);
$summary-color: var(--doc-summary-color, #00000099);
.custom-enter-active-class,
.custom-leave-active-class {
transition-property: background-color, transform, opacity;
}
.custom-enter-class,
.custom-leave-to-class {
background-color: red;
transform-origin: center;
opacity: 1;
transform: rotate(-360deg) translate(-100%, -100%);
}
.box1{
width: 300rpx;
height: 300rpx;
background-color: #ffb400;
justify-content: center;
align-items: center;
}
.box {
position: fixed;
top: 50%;
left: 50%;
width: 300rpx;
height: 300rpx;
margin: -150rpx 0 0 -150rpx;
background-color: #ffb400;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.demo-block {
margin: 32px 20px 0;
overflow: visible;
&__title {
margin: 0;
margin-top: 8px;
&-text {
color: $summary-color;
font-weight: 400;
font-size: 14px;
line-height: 16px;
&.large {
color: $title-color;
font-size: 18px;
font-weight: 700;
line-height: 26px;
}
&.ultra {
color: $title-color;
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
}
}
&__desc-text {
color: $summary-color;
margin: 8px 16px 0 0;
font-size: 14px;
line-height: 22px;
}
&__body {
margin: 16px 0;
overflow: visible;
.demo-block {
// margin-top: 0px;
margin: 0;
}
}
}
</style>

202
scoring/uni_modules/lime-transition/components/lime-transition/lime-transition.vue Normal file
View File

@@ -0,0 +1,202 @@
<template>
<view class="demo-block">
<text class="demo-block__title-text ultra">Transition 动画</text>
<text class="demo-block__desc-text">使元素从一种样式逐渐变化为另一种样式的效果。</text>
<view class="demo-block__body">
<view class="demo-block">
<text class="demo-block__title-text large">基础使用</text>
<view class="demo-block__body">
<l-transition :visible="true" :appear="true" name="fade-up">
<view class="box1">内容</view>
</l-transition>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text large">动画类型</text>
<view class="demo-block__body">
<button style="margin-bottom:20rpx" @click="onClick('fade')">Fade</button>
<button style="margin-bottom:20rpx" @click="onClick('fade-up')">Fade Up</button>
<button style="margin-bottom:20rpx" @click="onClick('fade-down')">Fade Down</button>
<button style="margin-bottom:20rpx" @click="onClick('fade-left')">Fade Left</button>
<button style="margin-bottom:20rpx" @click="onClick('fade-right')">Fade Right</button>
<button style="margin-bottom:20rpx" @click="onClick('slide-up')">Slide Up</button>
<button style="margin-bottom:20rpx" @click="onClick('slide-down')">Slide Down</button>
<button style="margin-bottom:20rpx" @click="onClick('slide-left')">Slide Left</button>
<button style="margin-bottom:20rpx" @click="onClick('slide-right')">slide right</button>
<l-transition
:visible="visible"
:name="name"
:destoryOnClose="true"
l-style="position: fixed; top: 50%;left: 50%;width: 300rpx; height: 300rpx; margin: -150rpx 0 0 -150rpx; background-color: #ffb400; display: flex; justify-content: center; align-items: center; z-index: 10;"
@after-enter="enter">
<view class="content">内容{{name}}</view>
</l-transition>
</view>
</view>
<view class="demo-block">
<text class="demo-block__title-text large">高级用法</text>
<view class="demo-block__body">
<view
v-if="display"
:class="classes"
class="box">
<view class="content">内容</view>
</view>
<button @click="toggle">切换</button>
</view>
</view>
</view>
</view>
</template>
<script>
import { useTransition } from '@/uni_modules/lime-transition';
let timer = -1;
export default {
data() {
return {
show: false,
visible: false,
name: '',
display: false,
classes: ''
}
},
mounted() {
const {state,inited, display, classes, finished} = useTransition({
defaultName: 'fade',
enterClass: 'custom-enter-class',
enterActiveClass: 'custom-enter-active-class',
leaveActiveClass: 'custom-leave-active-class',
leaveToClass: 'custom-leave-to-class',
appear: false,
duration: 300,
})
this.$watch(()=> display.value, (v)=>{
this.display = v
})
this.$watch(()=> classes.value, (v)=>{
this.classes = v
})
this.$watch('show', (v)=>{
state.value = v
})
this.finished = finished
},
methods: {
finished(){
},
toggle() {
this.show = !this.show
},
enter() {
setTimeout(()=>{
this.visible = false;
},300)
},
onClick(v) {
if (v.length > 0) {
clearTimeout(timer)
this.name = v;
this.visible = true;
// timer = setTimeout(() => {
// this.visible = false;
// }, 600)
}
}
}
}
</script>
<style lang="scss">
.custom-enter-active-class,
.custom-leave-active-class {
transition-duration: 300ms;
transition-property: background-color, transform, opacity;
}
.custom-enter-class,
.custom-leave-to-class {
background-color: red;
transform-origin: center;
opacity: 1;
transform: rotate(-360deg) translate(-100%, -100%);
}
.box {
position: fixed;
top: 50%;
left: 50%;
width: 300rpx;
height: 300rpx;
margin: -150rpx 0 0 -150rpx;
background-color: #ffb400;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.box1{
display: flex;
width: 300rpx;
height: 300rpx;
background-color: #ffb400;
justify-content: center;
align-items: center;
}
.demo-block {
margin: 32px 20px 0;
overflow: visible;
&__title {
margin: 0;
margin-top: 8px;
&-text {
color: rgba(0, 0, 0, 0.6);
font-weight: 400;
font-size: 14px;
line-height: 16px;
&.large {
color: rgba(0, 0, 0, 0.9);
font-size: 18px;
font-weight: 700;
line-height: 26px;
}
&.ultra {
color: rgba(0, 0, 0, 0.9);
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
}
}
&__desc-text {
color: rgba(0, 0, 0, 0.6);
margin: 8px 16px 0 0;
font-size: 14px;
line-height: 22px;
}
&__body {
margin: 16px 0;
overflow: visible;
.demo-block {
// margin-top: 0px;
margin: 0;
}
}
}
</style>

222
scoring/uni_modules/lime-transition/index.ts Normal file
View File

@@ -0,0 +1,222 @@
// @ts-nocheck
import { raf } from '@/uni_modules/lime-shared/raf';
// #ifndef UNI-APP-X
import { watchEffect, ref, nextTick } from '@/uni_modules/lime-shared/vue'
// #endif
export type TransitionEmitStatus = "before-enter" | "enter" | "after-enter" | "before-leave" | "leave" | "after-leave"
export type TransitionStatus = '' | 'enter' | 'leave';
export type UseTransitionOptions = {
element ?: Ref<UniElement | null>,
enterClass ?: string,
enterActiveClass ?: string,
enterToClass ?: string,
leaveClass ?: string,
leaveActiveClass ?: string,
leaveToClass ?: string,
appear ?: boolean,
defaultName ?: string,
name ?: () => string,
visible ?: () => boolean,
emits ?: (name : TransitionEmitStatus) => void,
onNextTick ?: (name : TransitionEmitStatus) => Promise<void>,
duration ?: number
removeClasses?: boolean;
}
type ClassNameMap = Map<string, string>;
export type UseTransitionReturn = {
state : Ref<boolean>,
display : Ref<boolean>,
inited : Ref<boolean>,
classes : Ref<string>,
name : Ref<string>,
finished : () => void,
toggle : (v : boolean) => void,
}
export function useTransition(options : UseTransitionOptions) : UseTransitionReturn {
const state = ref(false);
const display = ref(false);
const inited = ref(false);
const classes = ref('');
const name = ref(options.defaultName ?? 'fade');
const enterClass = options.enterClass ?? '';
const enterActiveClass = options.enterActiveClass ?? '';
const enterToClass = options.enterToClass ?? '';
const leaveActiveClass = options.leaveActiveClass ?? '';
const leaveToClass = options.leaveToClass ?? '';
const leaveClass = options.leaveClass ?? '';
const appear = options.appear ?? false
const duration = options.duration ?? 300;
let status : TransitionStatus = '';
let isTransitionEnd = false;
let isTransitioning = false;
let timeoutId = -1
const emitEvent = (event : TransitionEmitStatus) => {
options.emits?.(event);
};
// 结束
const finished = () => {
if (isTransitionEnd) return;
isTransitionEnd = true;
if (options.removeClasses ?? false) {
classes.value = '';
}
emitEvent(`after-${status}`)
// classes.value = ''
if (display.value && !state.value) {
display.value = false
}
}
const sleep = () : Promise<void> => {
return new Promise((resolve) => {
nextTick(() => {
raf(() => {
// #ifdef APP-ANDROID || APP-IOS || APP-HARMONY
if (options.element?.value != null) {
options.element?.value?.getBoundingClientRectAsync()?.then(res => {
resolve()
})
} else {
resolve()
}
// #endif
// #ifndef APP-ANDROID || APP-IOS || APP-HARMONY
resolve()
// #endif
})
})
})
}
const getClassNames = (name : string) : ClassNameMap => {
return new Map<string, string>([
['enter', `l-${name}-enter l-${name}-enter-active ${enterClass} ${enterActiveClass}`],
['enter-to', `l-${name}-enter-to l-${name}-enter-active ${enterToClass} ${enterActiveClass}`],
['leave', `l-${name}-leave l-${name}-leave-active ${leaveClass} ${leaveActiveClass}`],
['leave-to', `l-${name}-leave-to l-${name}-leave-active ${leaveToClass} ${leaveActiveClass}`]
])
};
const transitionQueue = ref<TransitionStatus[]>([]);
const performTransition = async (newStatus : TransitionStatus, eventName : TransitionStatus) => {
if (status == newStatus) return
transitionQueue.value.push(newStatus);
if (isTransitioning) return;
isTransitioning = true;
// 防止因结束 又切换为开始导致闪烁
isTransitionEnd = true;
while (transitionQueue.value.length > 0) {
const currentStatus = transitionQueue.value.shift()!;
status = currentStatus;
emitEvent(`before-${eventName}`);
// IOS hbx4.76如果时间过短会卡住
await sleep();
await sleep();
await sleep();
await sleep();
await sleep();
if (status != currentStatus) continue;
const classNames = getClassNames(name.value);
inited.value = true;
display.value = true;
// const executeBeforeTick = options.onNextTick?.(`before-${eventName}`);
// if (executeBeforeTick != null) {
// await executeBeforeTick;
// }
classes.value = classNames.get(eventName)!;
emitEvent(eventName);
const executeAfterTick = options.onNextTick?.(eventName);
if (executeAfterTick != null) {
await executeAfterTick;
}
await sleep();
// #ifdef MP
await sleep();
await sleep();
// #endif
if (status != currentStatus) continue;
classes.value = classNames.get(`${eventName}-to`)!;
// isTransitionEnd = false;
// 防止最后无法关闭
if (status == 'leave') {
setTimeout(() => {
finished()
}, duration)
}
}
// 不延迟 会导致快速切换时 因display none 闪烁
clearTimeout(timeoutId)
timeoutId = setTimeout(() => {
if (transitionQueue.value.length == 0 && status == newStatus) {
isTransitionEnd = false;
}
}, duration * 0.8)
isTransitioning = false;
}
// 定义进入过渡的函数
const enter = () => {
performTransition('enter', 'enter');
}
const leave = () => {
performTransition('leave', 'leave');
}
let init = false;
watchEffect(() => {
if (options.visible == null) return
state.value = options.visible!();
if (!appear && !init) {
init = true
return
}
if (state.value) {
enter()
} else {
leave()
}
})
watchEffect(() => {
if (options.name == null) return
name.value = options.name!()
})
const toggle = (v : boolean) => {
state.value = v
if (v) {
enter()
} else {
leave()
}
}
return {
state,
inited,
display,
classes,
name,
finished,
toggle
} as UseTransitionReturn
}

107
scoring/uni_modules/lime-transition/package.json Normal file
View File

@@ -0,0 +1,107 @@
{
"id": "lime-transition",
"displayName": "lime-transition 动画",
"version": "0.1.7",
"description": "lime-transition 使元素从一种样式逐渐变化为另一种样式的效果，兼容uniapp/uniappx",
"keywords": [
"lime-transition",
"transition",
"动画"
],
"repository": "",
"engines": {
"HBuilderX": "^4.28",
"uni-app": "^4.45",
"uni-app-x": "^4.75"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "",
"darkmode": "x",
"i18n": "x",
"widescreen": "x"
},
"uni_modules": {
"dependencies": [
"lime-shared"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "√",
"aliyun": "√",
"alipay": "√"
},
"client": {
"uni-app": {
"vue": {
"vue2": "√",
"vue3": "√"
},
"web": {
"safari": "√",
"chrome": "√"
},
"app": {
"vue": "√",
"nvue": "√",
"android": {
"extVersion": "",
"minVersion": "21"
},
"ios": "√",
"harmony": "√"
},
"mp": {
"weixin": "√",
"alipay": "-",
"toutiao": "-",
"baidu": "-",
"kuaishou": "-",
"jd": "-",
"harmony": "-",
"qq": "-",
"lark": "-"
},
"quickapp": {
"huawei": "-",
"union": "-"
}
},
"uni-app-x": {
"web": {
"safari": "√",
"chrome": "√"
},
"app": {
"android": {
"extVersion": "",
"minVersion": "21"
},
"ios": "√",
"harmony": "√"
},
"mp": {
"weixin": "√"
}
}
}
}
}
}

220
scoring/uni_modules/lime-transition/readme.md Normal file
View File

@@ -0,0 +1,220 @@
# lime-transition 动画
lime-transition是一个强大的过渡动画组件，使元素从一种样式逐渐变化为另一种样式，提供丰富的动画效果。组件兼容uni-app和uni-app x，支持多种动画类型，可自定义动画时长和过渡效果，适用于各种交互场景。
> 插件依赖：`lime-shared`
## 文档链接
📚 组件详细文档请访问以下站点：
- [动画组件文档 - 站点1](https://limex.qcoon.cn/components/transition.html)
- [动画组件文档 - 站点2](https://limeui.netlify.app/components/transition.html)
- [动画组件文档 - 站点3](https://limeui.familyzone.top/components/transition.html)
## 安装方法
1. 在uni-app插件市场中搜索并导入`lime-transition`
2. 导入后可能需要重新编译项目
3. 在页面中使用`l-transition`组件（组件）或`lime-transition`（演示）
## 代码演示
### 基础使用
将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。
```html
<l-transition :visible="show" :appear="true">
<view class="box">内容</view>
</l-transition>
```
```js
export default {
data() {
return {
show: true
}
}
}
```
### 动画类型
transition 组件内置了多种动画，可以通过`name`字段指定动画类型。
```html
<l-transition :visible="show" :appear="true" name="fade-up">
<view class="box">上滑淡入效果</view>
</l-transition>
```
### 控制显示隐藏
通过控制`visible`属性来显示或隐藏元素，触发相应的过渡动画。
```html
<l-transition :visible="show" name="fade">
<view class="box">点击按钮控制显示/隐藏</view>
</l-transition>
<button @tap="show = !show">{{ show ? '隐藏' : '显示' }}</button>
```
```js
export default {
data() {
return {
show: true
}
}
}
```
### 自定义动画时长
通过`duration`属性可以自定义动画的持续时间，单位为毫秒。
```html
<l-transition :visible="show" name="fade-up" :duration="800">
<view class="box">较慢的动画效果</view>
</l-transition>
```
### 首次渲染动画
通过设置`appear`属性为`true`，可以在组件首次渲染时就执行动画。
```html
<l-transition :visible="true" :appear="true" name="slide-down">
<view class="box">首次渲染就会有下滑进入动画</view>
</l-transition>
```
### 隐藏时销毁内容
通过设置`destoryOnClose`属性为`true`，可以在元素隐藏时销毁其内容，适用于需要重新初始化的场景。
```html
<l-transition :visible="show" :destoryOnClose="true" name="fade">
<view class="box">隐藏时会销毁内容</view>
</l-transition>
```
### 监听动画事件
transition 组件提供了多个事件，可以在动画的不同阶段执行相应的操作。
```html
<l-transition
:visible="show"
name="fade"
@before-enter="onBeforeEnter"
@enter="onEnter"
@after-enter="onAfterEnter"
@before-leave="onBeforeLeave"
@leave="onLeave"
@after-leave="onAfterLeave">
<view class="box">监听动画事件</view>
</l-transition>
```
```js
export default {
data() {
return {
show: true
}
},
methods: {
onBeforeEnter() {
console.log('进入前触发');
},
onEnter() {
console.log('进入中触发');
},
onAfterEnter() {
console.log('进入后触发');
},
onBeforeLeave() {
console.log('离开前触发');
},
onLeave() {
console.log('离开中触发');
},
onAfterLeave() {
console.log('离开后触发');
}
}
}
```
## 快速预览
导入插件后，可以直接使用以下标签查看演示效果：
```html
<!-- 代码位于 uni_modules/lime-transition/components/lime-transition -->
<lime-transition />
```
## Vue2使用说明
本插件使用了`composition-api`，如需在Vue2项目中使用，请按照[官方教程](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置。
关键配置代码（在main.js中添加）：
```js
// main.js vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
## API文档
### Props
| 参数 | 说明 | 类型 | 默认值 |
| --------------- | ------------------------ | ---------------- | --------- |
| name | 动画类型 | <em>string</em> | `fade` |
| visible | 是否展示组件 | <em>boolean</em> | `true` |
| appear | 首次出现是否展示动画 | <em>boolean</em> | `false` |
| destoryOnClose | 隐藏时是否销毁内容 | <em>boolean</em> | `false` |
| duration | 动画时长，单位为毫秒 | <em>number</em> | `300` |
| zIndex | 层级 | <em>number</em> | `11000` |
| l-style | 自定义样式 | <em>string</em> | - |
### Events
| 事件名 | 说明 | 参数 |
| ------------ | ------------ | ---- |
| before-enter | 进入前触发 | - |
| enter | 进入中触发 | - |
| after-enter | 进入后触发 | - |
| before-leave | 离开前触发 | - |
| leave | 离开中触发 | - |
| after-leave | 离开后触发 | - |
### 外部样式类
由于小程序的限制，只能在全局样式设置
| 类名 | 说明 |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| l-class | 根节点样式类 |
| enter-class | 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 |
| enter-active-class | 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 |
| enter-to-class | 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。 |
| leave-class | 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 |
| leave-active-class | 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 |
| leave-to-class | 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。 |
### 动画类型
| 名称 | 说明 | 效果描述 |
| ----------- | -------- | ---------------------------------- |
| fade | 淡入 | 元素透明度从0到1的变化 |
| fade-up | 上滑淡入 | 元素从下方向上移动并逐渐显示 |
| fade-down | 下滑淡入 | 元素从上方向下移动并逐渐显示 |
| fade-left | 左滑淡入 | 元素从右向左移动并逐渐显示 |
| fade-right | 右滑淡入 | 元素从左向右移动并逐渐显示 |
| slide-up | 上滑进入 | 元素从下方向上滑动进入视图 |
| slide-down | 下滑进入 | 元素从上方向下滑动进入视图 |
| slide-left | 左滑进入 | 元素从右向左滑动进入视图 |
| slide-right | 右滑进入 | 元素从左向右滑动进入视图 |
## 支持与赞赏
如果你觉得本插件解决了你的问题，可以考虑支持作者：
| 支付宝赞助 | 微信赞助 |
|------------|------------|
| ![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png) | ![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png) |

114
scoring/uni_modules/lime-transition/readme_old.md Normal file
View File

@@ -0,0 +1,114 @@
# lime-transition 动画
使元素从一种样式逐渐变化为另一种样式的效果，兼容uniapp/uniappx
## 文档
🚀 [transition【站点1】](https://limex.qcoon.cn/components/transition.html)
🌍 [transition【站点2】](https://limeui.netlify.app/components/transition.html)
🔥 [transition【站点3】](https://limeui.familyzone.top/components/transition.html)
## 安装
插件市场导入即可
## 代码演示
### 基础使用
将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。
```html
<l-transition :visible="true" :appear="true">
<view class="box1">内容</view>
</l-transition>
```
### 动画类型
transition 组件内置了多种动画，可以通过`name`字段指定动画类型。
```html
<l-transition :visible="true" :appear="true" name="fade-up">
<view class="box1">内容</view>
</l-transition>
```
### 查看示例
导入后直接使用这个标签查看演示效果
```html
// 代码位于 uni_modules/lime-transition/compoents/lime-transition
<lime-transition />
```
### 插件标签
默认 l-transition 为 component
默认 lime-transition 为 demo
### Vue2使用
插件使用了`composition-api`, 如果你希望在vue2中使用请按官方的教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
关键代码是: 在main.js中 在vue2部分加上这一段即可
```js
// main.js vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| ------------ | -------------------- | ------------------ | ------ |
| name | 动画类型 | _string_ | `fade` |
| visible | 是否展示组件 | _boolean_ | `true` |
| appear | 首次出现是否展示动画 | _boolean_ | `false` |
| destoryOnClose | 隐藏时是否销毁内容 | _boolean_ | `false` |
| duration | 动画时长，单位为毫秒 | _number_ | `300` |
| zIndex | 层级 | _number_ | `11000` |
| l-style | 自定义样式 | _string_ | - |
### Events
| 事件名 | 说明 | 参数 |
| ----------------- | ---------- | ---- |
| before-enter | 进入前触发 | - |
| enter | 进入中触发 | - |
| after-enter | 进入后触发 | - |
| before-leave | 离开前触发 | - |
| leave | 离开中触发 | - |
| after-leave | 离开后触发 | - |
### 外部样式类
由于小程序的限制，只能在全局样式设置
| 类名 | 说明 |
| --- | --- |
| l-class | 根节点样式类 |
| enter-class | 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 |
| enter-active-class | 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 |
| enter-to-class | 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。 |
| leave-class | 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 |
| leave-active-class | 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 |
| leave-to-class | 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。 |
### 动画类型
| 名称 | 说明 |
| ----------- | -------- |
| fade | 淡入 |
| fade-up | 上滑淡入 |
| fade-down | 下滑淡入 |
| fade-left | 左滑淡入 |
| fade-right | 右滑淡入 |
| slide-up | 上滑进入 |
| slide-down | 下滑进入 |
| slide-left | 左滑进入 |
| slide-right | 右滑进入 |
## 打赏
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png)
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png)