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

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>