93 lines
3.2 KiB
Vue
93 lines
3.2 KiB
Vue
<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>
|