react-transition-group 4.4.1中的CSSTransition不应用类

问题描述

我正在跟踪有关https://www.youtube.com/watch?v=IF6k0uZuypA的教程，但遇到了麻烦。 首先，这是我的过渡组件：

      <Csstransition
        in={activeMenu === EMenuChoices.main}
        appear={true}
        nodeRef={nodeRef1}
        unmountOnExit
        timeout={500}
        classNames="menu-primary"
      >
        <div className="menu-primary">
          <DropDownItem>My Profile</DropDownItem>
          <DropDownItem
            leftIcon={<CogIcon />}
            rightIcon={<ChevronIcon />}
            goToMenu={EMenuChoices.settings}
          >
            My Profile
          </DropDownItem>
        </div>
      </Csstransition>
      <Csstransition
        in={activeMenu === EMenuChoices.settings}
        appear={true}
        nodeRef={nodeRef2}
        unmountOnExit
        timeout={500}
        classNames="menu-secondary"
      >
        <div className="menu-secondary">
          <DropDownItem
            leftIcon={<ArrowIcon />}
            goToMenu={EMenuChoices.main}
          ></DropDownItem>
          <DropDownItem>Settings1</DropDownItem>
          <DropDownItem>Settings2</DropDownItem>
          <DropDownItem>Settings3</DropDownItem>
        </div>
      </Csstransition>
    </div>

EMenuChoices是一个枚举

enum EMenuChoices {
  main,settings,}

这是我的菜单主​​菜单和菜单辅助菜单

$speed: 500ms;

.menu-primary {
  &-enter {
    position: absolute;
    background-color: blue;
    transform: translateX(-110%);
    &-active {
      transform: translateX(0%);
      transition: all $speed ease;
    }
  }
  &-exit {
    position: absolute;
    &-active {
      transform: translateX(-110%);
      transition: all $speed ease;
    }
  }
}
.menu-secondary {
  &-enter {
    position: absolute;
    transform: translateX(110%);
    &-active {
      color: blue;
      transform: translateX(0%);
      transition: all $speed ease;
    }
  }
  &-exit {
    position: absolute;
    &-active {
      transform: translateX(110%);
      transition: all $speed ease;
    }
  }
}

问题在于，尽管菜单无法正确呈现，但我看不到所应用的类，因此动画无法正常工作。 我为此感到挣扎。找出问题所在的任何帮助将不胜感激。

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）