组件

Animate 动画组件

动画组件，提供一个容器，根据传入的状态，切换容器的类名${aniName}-enter、${aniName}-active 、${aniName}-leave，进行动画。

动画效果：组件默认提供了 fade-in-up & fade-out-down 效果，开发者可以传入 aniName 并编写指定的样式代码实现效果。
事件：根据状态会触发 onShow， onHide。

示例

先定义相应的 css 类

代码节选自：yis-demo/src/pages/components/animate/main.css

.transition{
    display: block;
    position: relative;
    transition: all 500ms;
    transform: translateX(-100%);
    opacity: 0;
}
.transition-enter{
    transform: translateX(0);
    opacity: 1;
}
.transition-active{
    transform: translateX(0);
    opacity: 1;
}
.transition-leave{
    transform: translateX(100%);
    opacity: 0;
}

js 组件只需要包裹即可

代码节选自：yis-demo/src/pages/components/animate/index.js

export default class Animatedemo extends PageCore {
    state = {
        showState: false
    };
    render = () => (
        <Animate
            className={classnames(styles.item)}
            on={this.state.showState}
            aniName={styles.transition}
            onShow={() => {
                console.log("show");
            }}
            onHide={() => {
                console.log("hide");
            }}
        >
            <Test />
        </Animate>
    )
}

参数

参数名	类型	必选	默认值	描述
on	boolean	√	false	展示状态
className	string	×	无	根节点附加类名
onShow	function	×	无	展示时调用
onHide	function	×	无	隐藏时调用
aniName	string	×	default	元素入场退场动画 -enter -active -leave