How to use the react-transition-group.CSSTransitionGroup function in react-transition-group

Axis.prototype.renderAxis = function () {
        return (React.createElement("g", null,
            this.renderAxisLine(),
            React.createElement(react_transition_group_1.CSSTransitionGroup, { component: "g", transitionName: "ticks", transitionEnterTimeout: 500, transitionLeaveTimeout: 500 }, this.renderAxisTicks()),
            this.renderAxisLabel()));
    };
    Axis.prototype.render = function () {

className: "movie-player " + (this.state.showOverlay ? "" : this.props.openBackup ? "" : this.state.showSubtitles ? "" : this.props.playerStatus ? this.props.playerStatus.status ? "" : "movie-hide" : "movie-hide"),
                    style: {
                        backgroundImage: "" + (this.props.loading ? this.props.error ? "none" : "url(assets/imgs/loading.apng)" : "none")
                    },
                    onMouseMove: this.mouseMove },
                this.state.videoBuffering ? _react2.default.createElement("div", { className: "video-buffer-container" }) : "",
                _react2.default.createElement(
                    _reactTransitionGroup.CSSTransitionGroup,
                    {
                        transitionName: "movie-box-anim",
                        transitionEnterTimeout: 250,
                        transitionLeaveTimeout: 250 },
                    backupContainer
                ),
                _react2.default.createElement(
                    _reactTransitionGroup.CSSTransitionGroup,
                    {
                        transitionName: "box-anim",
                        transitionEnterTimeout: 250,
                        transitionLeaveTimeout: 250 },
                    backupContainerBg
                ),
                _react2.default.createElement(
                    _Fade2.default,
                    {
                        mountOnEnter: true,
                        unmountOnExit: true,
                        duration: 350,
                        when: this.props.playerStatus,
                        distance: "10%",
                        bottom: true },
                    _react2.default.createElement(

TimeAxis.prototype.renderAxis = function () {
        if (this.props.transition === true) {
            return (React.createElement("g", null,
                this.renderAxisLine(),
                React.createElement(react_transition_group_1.CSSTransitionGroup, { component: "g", transitionName: "ticks", transitionEnterTimeout: 500, transitionLeaveTimeout: 500 }, this.renderAxisTicks()),
                this.renderAxisLabel()));
        }
        else {
            return (React.createElement("g", null,
                this.renderAxisLine(),
                this.renderAxisTicks(),
                this.renderAxisLabel()));
        }
    };
    TimeAxis.prototype.render = function () {

_react2.default.createElement(
                    _Fade2.default,
                    { when: this.state.logoIsLoaded, distance: "10%", bottom: true },
                    _react2.default.createElement("div", { className: "logo" })
                )
            ) : "";

            return _react2.default.createElement(
                "div",
                {
                    className: "app-container " + (process.platform === "win32" ? "windows-compensate" : ""),
                    onClick: this.closeMenu },
                process.platform === "darwin" ? _react2.default.createElement("div", {
                    className: "draggable " + (this.state.playMovie ? "invisible" : "") }) : "",
                _react2.default.createElement(
                    _reactTransitionGroup.CSSTransitionGroup,
                    {
                        transitionName: "player-anim",
                        transitionEnterTimeout: 250,
                        transitionLeaveTimeout: 250 },
                    this.state.account || this.state.create ? _react2.default.createElement(_accountContainer2.default, {
                        account: this.state.account,
                        closeAccount: this.closeAccount,
                        handleAccountSignin: this.handleAccountSignin,
                        handleAccountCreation: this.handleAccountCreation,
                        handleInput: this.handleInput,
                        loginError: this.state.loginError,
                        openAccount: this.openAccount,
                        openAccountCreation: this.openAccountCreation }) : ""
                ),
                _react2.default.createElement(
                    _reactTransitionGroup.CSSTransitionGroup,

if (onSearch) {
                onSearch();
              } else {
                _this2.setState({ searchTerm: document.getElementById('searchfield').value });
              }
            }
          },
          _react2.default.createElement('input', {
            style: Object.assign({}, styles.searchInput, style.searchInput),
            type: 'text',
            placeholder: 'Search',
            id: 'searchfield'
          })
        ),
        _react2.default.createElement(
          _reactTransitionGroup.CSSTransitionGroup,
          {
            transitionName: 'tree-list',
            transitionEnterTimeout: 300,
            transitionLeaveTimeout: 150
          },
          listItemsJSX
        )
      );

      function getLeftIcon(listItem, index, expandedListItems) {
        if (icons) {
          if (listItem.children) {
            if (expandedListItems.indexOf(index) === -1) {
              return icons.leftIconCollapsed;
            } else {
              return icons.leftIconExpanded;

handleAccountCreation: this.handleAccountCreation,
                        handleInput: this.handleInput,
                        loginError: this.state.loginError,
                        openAccount: this.openAccount,
                        openAccountCreation: this.openAccountCreation }) : ""
                ),
                _react2.default.createElement(
                    _reactTransitionGroup.CSSTransitionGroup,
                    {
                        transitionName: "loading-anim",
                        transitionEnterTimeout: 0,
                        transitionLeaveTimeout: 250 },
                    loadingContainer
                ),
                _react2.default.createElement(
                    _reactTransitionGroup.CSSTransitionGroup,
                    {
                        transitionName: "genreContainer-anim",
                        transitionEnterTimeout: 250,
                        transitionLeaveTimeout: 250 },
                    fullGenreContainer
                ),
                _react2.default.createElement(
                    _reactTransitionGroup.CSSTransitionGroup,
                    {
                        transitionName: "player-anim",
                        transitionEnterTimeout: 250,
                        transitionLeaveTimeout: 250 },
                    playerModal
                ),
                _react2.default.createElement(
                    _reactTransitionGroup.CSSTransitionGroup,

function Transition(_ref) {
  var part = _ref.part,
      direction = _ref.direction,
      props = _objectWithoutProperties(_ref, ['part', 'direction']);

  return _react2.default.createElement(_reactTransitionGroup.CSSTransitionGroup, _extends({
    component: 'div',
    transitionAppear: true,
    transitionAppearTimeout: TRANSITION_DURATION,
    transitionEnterTimeout: TRANSITION_DURATION,
    transitionLeaveTimeout: TRANSITION_DURATION
  }, props, {
    transitionName: 'Navigation-' + part + '-' + direction
  }));
}

e.preventDefault();
              if (handleSearch) {
                handleSearch(document.getElementById('searchfield').value);
              } else {
                _this2.setState({ searchTerm: document.getElementById('searchfield').value });
              }
              document.getElementById('searchfield').value = '';
            }
          },
          _react2.default.createElement(_core.TextField, { hintText: 'Search', fullWidth: true, id: 'searchfield' })
        ),
        _react2.default.createElement(
          _core.List,
          null,
          _react2.default.createElement(
            _reactTransitionGroup.CSSTransitionGroup,
            {
              transitionName: 'tree-list',
              transitionEnterTimeout: 300,
              transitionLeaveTimeout: 150
            },
            listItemsJSX
          )
        )
      );

      function getLeftIcon(listItem, useFolderIcons) {
        if (useFolderIcons) {
          if (listItem.children) {
            return _react2.default.createElement(_Folder2.default, null);
          } else {
            return _react2.default.createElement(_InsertDriveFile2.default, null);

value: function render() {
      var _this2 = this;

      var _props = this.props,
          notifications = _props.notifications,
          enterTimeout = _props.enterTimeout,
          leaveTimeout = _props.leaveTimeout;

      var className = (0, _classnames2.default)('notification-container', {
        'notification-container-empty': notifications.length === 0
      });
      return _react2.default.createElement(
        'div',
        { className: className },
        _react2.default.createElement(
          _reactTransitionGroup.CSSTransitionGroup,
          {
            transitionName: 'notification',
            transitionEnterTimeout: enterTimeout,
            transitionLeaveTimeout: leaveTimeout
          },
          notifications.map(function (notification) {
            var key = notification.id || new Date().getTime();
            return _react2.default.createElement(_Notification2.default, {
              key: key,
              type: notification.type,
              title: notification.title,
              message: notification.message,
              timeOut: notification.timeOut,
              onClick: notification.onClick,
              onRequestHide: _this2.handleRequestHide(notification)
            });

searchTorrent: this.props.searchTorrent,
                closeBackup: this.props.closeBackup,
                setPlayerLoading: this.props.setPlayerLoading }) : "";
            var backupContainerBg = this.props.openBackup ? _react2.default.createElement("div", { className: "backup-bg", onClick: this.handleBg }) : "";

            return _react2.default.createElement(
                "div",
                {
                    className: "movie-player " + (this.state.showOverlay ? "" : this.props.openBackup ? "" : this.state.showSubtitles ? "" : this.props.playerStatus ? this.props.playerStatus.status ? "" : "movie-hide" : "movie-hide"),
                    style: {
                        backgroundImage: "" + (this.props.loading ? this.props.error ? "none" : "url(assets/imgs/loading.apng)" : "none")
                    },
                    onMouseMove: this.mouseMove },
                this.state.videoBuffering ? _react2.default.createElement("div", { className: "video-buffer-container" }) : "",
                _react2.default.createElement(
                    _reactTransitionGroup.CSSTransitionGroup,
                    {
                        transitionName: "movie-box-anim",
                        transitionEnterTimeout: 250,
                        transitionLeaveTimeout: 250 },
                    backupContainer
                ),
                _react2.default.createElement(
                    _reactTransitionGroup.CSSTransitionGroup,
                    {
                        transitionName: "box-anim",
                        transitionEnterTimeout: 250,
                        transitionLeaveTimeout: 250 },
                    backupContainerBg
                ),
                _react2.default.createElement(
                    _Fade2.default,