1.2.6 • Published 3 years ago
@lxjx/react-transition-spring v1.2.6
Introduction
react-transition-spring 是基于 react-spring 的一套封装组件,用于简化通过react-spring执行开关动画的方式, 同时, 也扩展了一些非常使用的属性如unmountOnExit
、mountOnEnter
。
💡 本库应用于明确知道入场值和离场值的过渡动画(亦称为开关动画), 如果动画需要通过复杂的操作完成(手势等拥有不确定的动画结果的动画)请直接使用react-spring
提供基础组件 TransitionBase
以及基于 TransitionBase
的上层组件 Transition
, 内置了一些非常常见的开关动画效果。
Usage
以下示例介绍了如何使用 Transition
和 TransitionBase
执行 fade
动画
import { Transition, TransitionBase } from '@lxjx/react-transition-spring';
const [show, setShow] = useState(false);
return (
<div style={{ padding: 100 }}>
<button onClick={() => setShow(prev => !prev)}>toggle</button>
<Transition toggle={show} style={redBox} type="fade">
<div>动画</div>
</Transition>
<TransitionBase toggle={show} style={redBox} to={{ opacity: 1 }} from={{ opacity: 0 }} >
<div>动画</div>
</TransitionBase>
</div>
);
API
共有配置
interface Base {
/** 控制开关动画 */
toggle?: boolean;
/** true | 初次加载时是否触发动画 */
appear?: boolean;
/** 'div' | 包裹元素的tag类型。(注意当为span等内联元素时transform不会生效,需要将其设置为inner-block) */
tag?: keyof typeof animated;
/** 动画开始前的延迟时间 */
delay?: number;
/** react-spring 动画配置 */
config?: SpringBaseProps['config'];
/** 所有动画结束后调用, 接收动画结束后的动画值 */
onRest?: (transitionArg: any) => void;
/** 动画开始, 会在动画运行、初始化期间多次调用,不应该将其作为进行其他操作的依据 */
onStart?: () => void;
/** false | 默认情况下动画结束后组件依然会保持挂载,设置此属性会在过渡结束后会卸载组件 */
unmountOnExit?: boolean;
/** false | 初次渲染时,组件默认会以from状态先加载,为true时,只有在初次触发动画时才会加载组件 */
mountOnEnter?: boolean;
/** 包裹元素的类名 */
className?: string;
/** 包裹元素样式 */
style?: React.CSSProperties;
/** 执行某些`破坏性`(form和to被设置为和前一个值毫无关联的动画值)的动画时,可以设置此项来取消前一个动画造成的影响 */
reset?: boolean;
/** 指向根节点的ref, 用于直接操作根节点 */
innerRef?: any;
[key: string]: any;
}
Transition
集成组件,包含一组内置动画,使用更方便
interface TransitionProps extends Base {
/** 动画类型 */
type: TransitionTypes;
/** true | 为所有类型的动画附加fade过渡,使其视觉效果更平滑 */
alpha?: boolean;
}
type TransitionTypes =
| 'fade'
| 'zoom'
| 'punch'
| 'slideLeft'
| 'slideRight'
| 'slideTop'
| 'slideBottom'
| 'bounce';
TransitionBase
基础组件,自行配置动画值,使用更灵活
interface TransitionBaseProps extends Base {
/** 动画的入场状态 */
to: any;
/** 动画的离场状态 */
from: any;
/** 用于插值动画,在动画属性传递给动画元素前会将即将用于动画的style和当前的toggle状态传入并返回新的动画对象 */
interpolater?: (props: any, toggle: boolean) => any;
/** true | 执行完离场动画后对元素进行可见性隐藏, 防止离场元素占用布局空间和触发事件 */
changeVisible?: boolean;
}
进阶使用
执行数字动画
<TransitionBase
toggle={toggle}
className="box"
tto={{ number: 0 }}
from={{ number: 100000 }}
>
{({ number: number }: any) => number.interpolate((n: any) => n.toFixed(2))}
</TransitionBase>