Question

有人可以帮助我进行我想要创建的上下滑动过渡全屏弹出窗口。使用CSSTransitionGroup，我无法获得所需的滑动效果。代码示例可以在这里找到

非常感谢任何帮助。感谢

Answer 1

这里有一些问题，很容易解决：

1）您必须使用import CSSTransitionGroup from 'react-addons-css-transition-group而不仅仅是普通的旧转换组包 - 只添加生命周期挂钩，CSS版本用于添加/删除类

2）最重要的是要了解实际触发动画的内容。 CSS转换组的工作原理是将转换类应用于进入和退出其children的子元素（由键保持跟踪），但为了这样做，CSSTransitionGroup必须已经存在，它是有条件存在的子元素或不。在您的代码中，通过仅在弹出状态打开时添加CSSTransition组本身意味着它无法监视其子项，因此它只会出现并且在没有转换的情况下消失。因此，您必须始终渲染CSSTransition组，但在状态打开时有条件地将弹出div添加为子项...

const PopUp = ({ state, close }) => {

  return (
      <CSSTransitionGroup
            transitionName="pop"
            transitionAppear={true}
            transitionAppearTimeout={2000}
            transitionEnterTimeout={2000}
            transitionLeaveTimeout={300}
            component="div"
            >
           {state.open && <div key="popup"
              style={{
                width: window.innerWidth,
                position: 'fixed',
                left: 0,
                top: 0,
                overflowX: 'hidden',
                backgroundColor: 'white',
                zIndex: '999',
              }}
            >
              <span>I am a popup</span>
              <FlatButton label="Close" onClick={close} />
            </div>
           }
      </CSSTransitionGroup>
  );
};

3）你可以从上面看到我还添加了appear，以防动画在第一次装载时发生 - 在你的情况下它的罚款已经在关闭状态首先呈现但值得注意这里供将来参考

4）最后，您要在CSS中的height属性上设置动画，但是您已在样式属性中将高度显式设置为height: window.innerHeight。这将转换为HTML中的样式标记，它总是优先于任何CSS样式表规则，因此您的动画高度总是会失去它。删除它并且您的动画有效 - 但是在动画结束后不会设置高度。您可以通过保留height: window.innerHeight并强制CSS定义的高度来使用height: 100vh !important;语法覆盖它来解决此问题（尽管这实际上是错误的CSS实践，因为当您创建更复杂的样式表时会导致其自身令人头疼，因为它阻止你能够使用特异性）

以下是工作版本：https://codesandbox.io/s/W7Q8QP56W

为了进一步改进这一点，我建议您将此组件的所有CSS移动到样式表，以便它们可以正常使用特异性和级联来重叠，或使用类似opacity之类的动画来代替（因为默认默认值是1，你不需要在你的JS风格道具中设置它） - 无论如何，当完成动画时，react会完全删除元素，因此当它关闭时你不会被阻止与页面交互，所以你可以自由地硬编码到整页高度

Answer 2

我可以通过react-motion实现同样的目标。例如：

反应CSS过渡组

2 个答案: