l-transition.uvue
3.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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>