Question

我很反应，我正在尝试建立一个反应应用程序。当点击导航栏中的登录时，我想要一个登录框在页面上淡入。在我的App.js中，我设置了CSSTransitionGroup，如下所示：

<CSSTransitionGroup
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}
    transitionAppear={true}
    transitionAppearTimeout={500}
    transitionName="fade">
  {loginPopup}
</CSSTransitionGroup>

登录弹出窗口显示基于状态：

let loginPopup;

if (display_login) {
  loginPopup = (<LoginPopup key={1} />)
}

现在我用于过渡的css看起来像这样：

//fade
.fade-appear {
  opacity: 0.01;
}

.fade-appear-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-leave {
  opacity: 1;
}

.fade-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

我的问题是... fadeout按预期工作，但fadein不起作用。它只是弹出（没有过渡）。我也尝试过使用.fade-enter - 但我认为输入错误，因为LoginPopup组件是根据状态生成的。

为什么淡入的任何想法都不起作用？

编辑：这是代码的要点：https://gist.github.com/xenoxsis/6345eb6897aedf228662ffaf64f65053

CSSTransitionGroup不会淡入

0 个答案: