97 lines
3.4 KiB
Plaintext
97 lines
3.4 KiB
Plaintext
<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> |