Почему не работает transition react?

Question

[Ibishka]

<CSSTransition
            in={this.state.openDropdown}
            timeout={200}
            className="dropdown fade"
            mountOnEnter
            unmountOnExit
          >
            <div>
              <nav className="menu">
                <li className="menu__item">
                  <NavLink
                    to="/"
                    className="menu__link"
                    activeClassName="active"
                    exact
                  >
                    Home
                  </NavLink>
                </li>
                <li className="menu__item">
                  <NavLink
                    to="/news"
                    className="menu__link"
                    activeClassName="active"
                  >
                    News
                  </NavLink>
                </li>
              </nav>
            </div>
          </CSSTransition>

.dropdown {
  &.enter {
    opacity: 0;
    &-active {
      opacity: 1;
    }
  }
  &.exit {
    &-active {
      opacity: 0;
    }
  }
}

По инспектеру обнаружил что класс добавляются без dropdown т.е если писать так работает анимация

.fade {
  &.enter {
    opacity: 0;
    &-active {
      opacity: 1;
    }
  }
  &.exit {
    &-active {
      opacity: 0;
    }
  }
}

Но в документации пишет что классы должны начаться исходя моего кода со словом dropdown. Почему не так?

Answer 1

[Wondermarin]

className != classNames

<CSSTransition
  in={this.state.openDropdown}
  timeout={200}
  className="dropdown fade"
  mountOnEnter
  unmountOnExit
>