rc-animate@3.1.1

/* eslint no-console:0, react/no-multi-comp:0, react/prop-types: 0 */

import React from 'react';
import ReactDOM from 'react-dom';
import { CSSMotion } from 'rc-animate';
import classNames from 'classnames';
import './CSSMotionStack.less';

window.motionRef = React.createRef();

class Demo extends React.Component {
  state = {
    show: true,
    hasMotionClassName: true,
  };

  onTrigger = () => {
    this.setState({
      show: !this.state.show,
    });
  };

  onTriggerClassName = () => {
    this.setState({
      hasMotionClassName: !this.state.hasMotionClassName,
    });
  };

  onCollapse = () => ({ height: 0 });

  skipColorTransition = (_, event) => {
    // CSSMotion support multiple transition.
    // You can return false to prevent motion end when fast transition finished.
    if (event.propertyName === 'background-color') {
      return false;
    }
    return true;
  };

  styleGreen = () => ({
    background: 'green',
  });

  render() {
    const { show, hasMotionClassName } = this.state;

    return (
      <div>
        <label>
          <input type="checkbox" onChange={this.onTrigger} checked={show} />{' '}
          Show Component
        </label>

        <label>
          <input
            type="checkbox"
            onChange={this.onTriggerClassName}
            checked={hasMotionClassName}
          />{' '}
          hasMotionClassName
        </label>

        <div className="grid">
          <div>
            <h2>With Transition Class</h2>
            <div>
              <CSSMotion
                visible={show}
                motionName={hasMotionClassName ? 'transition' : null}
                leavedClassName="hidden"
                removeOnLeave={false}
                onAppearStart={this.onCollapse}
                onEnterStart={this.onCollapse}
                onLeaveActive={this.onCollapse}
                onEnterEnd={this.skipColorTransition}
                onLeaveEnd={this.skipColorTransition}
                ref={window.motionRef}
              >
                {({ style, className }, ref) => {
                  console.log('>>>', className, style);
                  return (
                    <div
                      ref={ref}
                      className={classNames('demo-block', className)}
                      style={style}
                    />
                  );
                }}
              </CSSMotion>
            </div>
            {/* <div>
              <CSSMotion
                visible={!show}
                motionName={hasMotionClassName ? 'transition' : null}
                removeOnLeave={removeOnLeave}
                leavedClassName="hidden"
                onAppearStart={this.onCollapse}
                onEnterStart={this.onCollapse}
                onLeaveActive={this.onCollapse}
                onEnterEnd={this.skipColorTransition}
                onLeaveEnd={this.skipColorTransition}
                ref={window.motionRef}
              >
                {({ style, className }, ref) => (
                  <div
                    ref={ref}
                    className={classNames('demo-block', className)}
                    style={style}
                  />
                )}
              </CSSMotion>
            </div> */}
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('__react-content'));