src/animate/index.js File

  1. import React,{Component} from 'react'
  2. import PropTypes from 'prop-types'
  3. import classnames from 'classnames'
  4. import {CSSTransitionGroup} from 'react-transition-group'
  5. import Logger from '../utils/logger'
  6.  
  7. import '../style'
  8. import 'phoenix-styles/less/modules/animation.less'
  9.  
  10. /**
  11.  * 动画外层组件<br/>
  12.  * - 使用时需要在子元素增加animated类名实现动画效果, animated定义的是过渡的duration和fill-mode, 默认300ms, 完全可以自定义。
  13.  * - 可通过transitionName设置动画名称, 可选fade、slide-top、slide-bottom(还将补充), 默认fade。
  14.  * - 可通过transitionEnterTimeout设置进入延迟时间。
  15.  * - 可通过transitionLeaveTimeout设置离开延迟时间。
  16.  *
  17.  * 示例:
  18.  * ```code
  19.  *     <Animate className='popup-content' transitionName='slide-top'>
  20.  *         {this.renderPopup()}
  21.  *     </Animate>
  22.  * ```
  23.  * ```code
  24.  *     renderPopup(){
  25.  *         let {visible,children,className} = this.props;
  26.  *         if(visible){
  27.  *             return <div {...this.props} className={'popup-main', 'animated', className)}>{children}</div>;
  28.  *         }else{
  29.  *             return '';
  30.  *         }
  31.  *     }
  32.  * ```
  33.  *
  34.  * @class Animate
  35.  * @module 辅助组件
  36.  * @extends Component
  37.  * @constructor
  38.  * @since 1.0.0
  39.  * @demo animate|animate.js {展示}
  40.  * @show true
  41.  * */
  42.  
  43. export default class Animate extends Component{
  44.  
  45.     static propTypes = {
  46.         /**
  47.          * 动画名称,默认fade
  48.          * @property transitionName
  49.          * @type String
  50.          * @default 'fade'
  51.          * */
  52.         transitionName: PropTypes.string,
  53.         /**
  54.          * 动画进入延迟时间
  55.          * @property transitionEnterTimeout
  56.          * @type Number
  57.          * */
  58.         transitionEnterTimeout: PropTypes.number,
  59.         /**
  60.          * 动画退出延迟时间
  61.          * @property transitionLeaveTimeout
  62.          * @type Number
  63.          * */
  64.         transitionLeaveTimeout: PropTypes.number
  65.     };
  66.  
  67.     static defaultProps = {
  68.         transitionName: 'fade',
  69.         transitionEnterTimeout: 100,
  70.         transitionLeaveTimeout: 300
  71.     }
  72.  
  73.     constructor(props, context) {
  74.         super(props, context);
  75.         new Logger('Animate');
  76.     }
  77.  
  78.     renderAnimate(){
  79.         let {transitionName, transitionEnterTimeout, transitionLeaveTimeout, children} = this.props
  80.  
  81.         return (
  82.             <CSSTransitionGroup {...this.props}
  83.                 transitionName={transitionName}
  84.                 transitionEnterTimeout={transitionEnterTimeout}
  85.                 transitionLeaveTimeout={transitionLeaveTimeout}
  86.             >
  87.                 {children}
  88.             </CSSTransitionGroup>
  89.         )
  90.     }
  91.  
  92.     render(){
  93.         return this.renderAnimate()
  94.     }
  95. }
  96.