React CSS转换组

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风格的道具中设置它） - 反应将删除整个元素一旦动画完成后，无论如何你都不会被阻止与页面交互，因此你可以自由地将它硬编码到整页高度

Answer 2

我可以通过反应运动达到同样的效果。 例子：