| | | | | | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

xy-css-transition

CSS 过渡组件, 包裹元素, 在其进入和离开时执行动画

安装

# yarn
yarn add xy-css-transition

使用例子

import React from "react";
import ReactDOM from "react-dom";
import CssTransition from "xy-css-transition";
ReactDOM.render(
    <CSSTransition timeout={500} visible={visible}>
        <div className="block" />
    </CSSTransition>,
    container
);

API

| 属性 | 说明 | 类型 | 默认值 | | ---------------- | ----------------------------------------- | -------- | ------------ | | timeout | 过渡时间，需要与 css 里的过渡时间保持一直 | number | - | | visible | 显示动画/隐藏动画 | boolean | - | | name | 过渡 css 样式名称 | string | transition | | animateOnInit | 第一次是否执行动画 | boolean | false | | onAppear | 进入过渡开始事件 | Function | - | | onAppearComplete | 进入过渡完毕事件 | Function | - | | onLeave | 离开过渡开始事件 | Function | - | | onLeaveComplete | 离开过渡完毕事件 | Function | - |

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-css-transition is released under the MIT license.