UNPKG

@ray-js/smart-ui

Version:

轻量、可靠的智能小程序 UI 组件库

107 lines (106 loc) 3.14 kB
/// <reference types="react" /> import { SmartBaseExternalClassName, SmartComponent, SmartEventHandler } from '../base'; export interface SmartTransitionProps { /** * 动画类型 * * `fade` 淡入 * * `fade-up` 上滑淡入 * * `fade-down` 下滑淡入 * * `fade-left` 左滑淡入 * * `fade-right` 右滑淡入 * * `slide-up` 上滑进入 * * `slide-down` 下滑进入 * * `slide-left` 左滑进入 * * `slide-right` 右滑进入 * * `` 空字符串用于自定义 * * @default 'fade' */ name?: 'fade' | 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | ''; /** * 是否展示组件 * * @default true */ show?: boolean; /** * 动画时长,单位为毫秒 * * @default 300 */ duration?: number | { enter: number; leave: number; }; /** * 自定义样式 */ customStyle?: React.CSSProperties; } export interface SmartTransitionEvents { /** * 进入前触发 */ onBeforeEnter?: SmartEventHandler; /** * 进入中触发 */ onEnter?: SmartEventHandler; /** * 进入后触发 */ onAfterEnter?: SmartEventHandler; /** * 离开前触发 */ onBeforeLeave?: SmartEventHandler; /** * 离开中触发 */ onLeave?: SmartEventHandler; /** * 离开后触发 */ onAfterLeave?: SmartEventHandler; } export interface SmartTransitionExternalClassName extends SmartBaseExternalClassName { /** * 定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。 */ enterClass?: string; /** * 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。 * * 这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。 */ enterActiveClass?: string; /** * 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 `enter-class` 被移除),在过渡/动画完成之后移除。 */ enterToClass?: string; /** * 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。 */ leaveClass?: string; /** * 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。 * * 这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。 */ leaveActiveClass?: string; /** * 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 `leave-class` 被删除),在过渡/动画完成之后移除。 */ leaveToClass?: string; } export type SmartTransition = SmartComponent<SmartTransitionProps, SmartTransitionEvents, SmartTransitionExternalClassName>;