Initial commit of akmon project
This commit is contained in:
27
uni_modules/lime-transition/changelog.md
Normal file
27
uni_modules/lime-transition/changelog.md
Normal file
@@ -0,0 +1,27 @@
|
||||
|
||||
## 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
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
35
uni_modules/lime-transition/components/l-transition/props.ts
Normal file
35
uni_modules/lime-transition/components/l-transition/props.ts
Normal 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
uni_modules/lime-transition/components/l-transition/type.ts
Normal file
38
uni_modules/lime-transition/components/l-transition/type.ts
Normal 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;
|
||||
};
|
||||
@@ -0,0 +1,156 @@
|
||||
<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">
|
||||
.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: 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>
|
||||
@@ -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>
|
||||
207
uni_modules/lime-transition/index.ts
Normal file
207
uni_modules/lime-transition/index.ts
Normal file
@@ -0,0 +1,207 @@
|
||||
// @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
|
||||
}
|
||||
|
||||
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;
|
||||
emitEvent(`after-${status}`)
|
||||
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}`);
|
||||
|
||||
await sleep();
|
||||
await sleep();
|
||||
if (status != currentStatus) continue;
|
||||
|
||||
const classNames = getClassNames(name.value);
|
||||
inited.value = true;
|
||||
display.value = true;
|
||||
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
|
||||
}
|
||||
BIN
uni_modules/lime-transition/lime-transition.zip
Normal file
BIN
uni_modules/lime-transition/lime-transition.zip
Normal file
Binary file not shown.
88
uni_modules/lime-transition/package.json
Normal file
88
uni_modules/lime-transition/package.json
Normal file
@@ -0,0 +1,88 @@
|
||||
{
|
||||
"id": "lime-transition",
|
||||
"displayName": "lime-transition 动画",
|
||||
"version": "0.1.4",
|
||||
"description": "lime-transition 使元素从一种样式逐渐变化为另一种样式的效果，兼容uniapp/uniappx",
|
||||
"keywords": [
|
||||
"lime-transition",
|
||||
"transition",
|
||||
"动画"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^4.28"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"lime-shared"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-uvue": "y",
|
||||
"app-nvue": "u",
|
||||
"app-harmony": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
112
uni_modules/lime-transition/readme.md
Normal file
112
uni_modules/lime-transition/readme.md
Normal file
@@ -0,0 +1,112 @@
|
||||
# lime-transition 动画
|
||||
- 使元素从一种样式逐渐变化为另一种样式的效果，兼容uniapp/uniappx
|
||||
- 这个插件不直接使用标签
|
||||
|
||||
## 文档
|
||||
[transition](https://limex.qcoon.cn/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 | 右滑进入 |
|
||||
|
||||
|
||||
## 打赏
|
||||
|
||||
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user