\n *
\n * \n * {\"I'll receive my-node-* classes\"}\n *
\n * \n *
\n *
\n * );\n * }\n * ```\n *\n * When the `in` prop is set to `true`, the child component will first receive\n * the class `example-enter`, then the `example-enter-active` will be added in\n * the next tick. `CSSTransition` [forces a\n * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)\n * between before adding the `example-enter-active`. This is an important trick\n * because it allows us to transition between `example-enter` and\n * `example-enter-active` even though they were added immediately one after\n * another. Most notably, this is what makes it possible for us to animate\n * _appearance_.\n *\n * ```css\n * .my-node-enter {\n * opacity: 0;\n * }\n * .my-node-enter-active {\n * opacity: 1;\n * transition: opacity 200ms;\n * }\n * .my-node-exit {\n * opacity: 1;\n * }\n * .my-node-exit-active {\n * opacity: 0;\n * transition: opacity: 200ms;\n * }\n * ```\n *\n * `*-active` classes represent which styles you want to animate **to**.\n */\n\n\nvar CSSTransition =\n/*#__PURE__*/\nfunction (_React$Component) {\n _inheritsLoose(CSSTransition, _React$Component);\n\n function CSSTransition() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n\n _this.onEnter = function (node, appearing) {\n var _this$getClassNames = _this.getClassNames(appearing ? 'appear' : 'enter'),\n className = _this$getClassNames.className;\n\n _this.removeClasses(node, 'exit');\n\n addClass(node, className);\n\n if (_this.props.onEnter) {\n _this.props.onEnter(node, appearing);\n }\n };\n\n _this.onEntering = function (node, appearing) {\n var _this$getClassNames2 = _this.getClassNames(appearing ? 'appear' : 'enter'),\n activeClassName = _this$getClassNames2.activeClassName;\n\n _this.reflowAndAddClass(node, activeClassName);\n\n if (_this.props.onEntering) {\n _this.props.onEntering(node, appearing);\n }\n };\n\n _this.onEntered = function (node, appearing) {\n var appearClassName = _this.getClassNames('appear').doneClassName;\n\n var enterClassName = _this.getClassNames('enter').doneClassName;\n\n var doneClassName = appearing ? appearClassName + \" \" + enterClassName : enterClassName;\n\n _this.removeClasses(node, appearing ? 'appear' : 'enter');\n\n addClass(node, doneClassName);\n\n if (_this.props.onEntered) {\n _this.props.onEntered(node, appearing);\n }\n };\n\n _this.onExit = function (node) {\n var _this$getClassNames3 = _this.getClassNames('exit'),\n className = _this$getClassNames3.className;\n\n _this.removeClasses(node, 'appear');\n\n _this.removeClasses(node, 'enter');\n\n addClass(node, className);\n\n if (_this.props.onExit) {\n _this.props.onExit(node);\n }\n };\n\n _this.onExiting = function (node) {\n var _this$getClassNames4 = _this.getClassNames('exit'),\n activeClassName = _this$getClassNames4.activeClassName;\n\n _this.reflowAndAddClass(node, activeClassName);\n\n if (_this.props.onExiting) {\n _this.props.onExiting(node);\n }\n };\n\n _this.onExited = function (node) {\n var _this$getClassNames5 = _this.getClassNames('exit'),\n doneClassName = _this$getClassNames5.doneClassName;\n\n _this.removeClasses(node, 'exit');\n\n addClass(node, doneClassName);\n\n if (_this.props.onExited) {\n _this.props.onExited(node);\n }\n };\n\n _this.getClassNames = function (type) {\n var classNames = _this.props.classNames;\n var isStringClassNames = typeof classNames === 'string';\n var prefix = isStringClassNames && classNames ? classNames + '-' : '';\n var className = isStringClassNames ? prefix + type : classNames[type];\n var activeClassName = isStringClassNames ? className + '-active' : classNames[type + 'Active'];\n var doneClassName = isStringClassNames ? className + '-done' : classNames[type + 'Done'];\n return {\n className: className,\n activeClassName: activeClassName,\n doneClassName: doneClassName\n };\n };\n\n return _this;\n }\n\n var _proto = CSSTransition.prototype;\n\n _proto.removeClasses = function removeClasses(node, type) {\n var _this$getClassNames6 = this.getClassNames(type),\n className = _this$getClassNames6.className,\n activeClassName = _this$getClassNames6.activeClassName,\n doneClassName = _this$getClassNames6.doneClassName;\n\n className && removeClass(node, className);\n activeClassName && removeClass(node, activeClassName);\n doneClassName && removeClass(node, doneClassName);\n };\n\n _proto.reflowAndAddClass = function reflowAndAddClass(node, className) {\n // This is for to force a repaint,\n // which is necessary in order to transition styles when adding a class name.\n if (className) {\n /* eslint-disable no-unused-expressions */\n node && node.scrollTop;\n /* eslint-enable no-unused-expressions */\n\n addClass(node, className);\n }\n };\n\n _proto.render = function render() {\n var props = _extends({}, this.props);\n\n delete props.classNames;\n return _react.default.createElement(_Transition.default, _extends({}, props, {\n onEnter: this.onEnter,\n onEntered: this.onEntered,\n onEntering: this.onEntering,\n onExit: this.onExit,\n onExiting: this.onExiting,\n onExited: this.onExited\n }));\n };\n\n return CSSTransition;\n}(_react.default.Component);\n\nCSSTransition.defaultProps = {\n classNames: ''\n};\nCSSTransition.propTypes = process.env.NODE_ENV !== \"production\" ? _extends({}, _Transition.default.propTypes, {\n /**\n * The animation classNames applied to the component as it enters, exits or\n * has finished the transition. A single name can be provided and it will be\n * suffixed for each stage: e.g.\n *\n * `classNames=\"fade\"` applies `fade-enter`, `fade-enter-active`,\n * `fade-enter-done`, `fade-exit`, `fade-exit-active`, `fade-exit-done`,\n * `fade-appear`, `fade-appear-active`, and `fade-appear-done`.\n *\n * **Note**: `fade-appear-done` and `fade-enter-done` will _both_ be applied.\n * This allows you to define different behavior for when appearing is done and\n * when regular entering is done, using selectors like\n * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply an\n * epic entrance animation when element first appears in the DOM using\n * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can\n * simply use `fade-enter-done` for defining both cases.\n *\n * Each individual classNames can also be specified independently like:\n *\n * ```js\n * classNames={{\n * appear: 'my-appear',\n * appearActive: 'my-active-appear',\n * appearDone: 'my-done-appear',\n * enter: 'my-enter',\n * enterActive: 'my-active-enter',\n * enterDone: 'my-done-enter',\n * exit: 'my-exit',\n * exitActive: 'my-active-exit',\n * exitDone: 'my-done-exit',\n * }}\n * ```\n *\n * If you want to set these classes using CSS Modules:\n *\n * ```js\n * import styles from './styles.css';\n * ```\n *\n * you might want to use camelCase in your CSS file, that way could simply\n * spread them instead of listing them one by one:\n *\n * ```js\n * classNames={{ ...styles }}\n * ```\n *\n * @type {string | {\n * appear?: string,\n * appearActive?: string,\n * appearDone?: string,\n * enter?: string,\n * enterActive?: string,\n * enterDone?: string,\n * exit?: string,\n * exitActive?: string,\n * exitDone?: string,\n * }}\n */\n classNames: _PropTypes.classNamesShape,\n\n /**\n * A `