React CSS 过渡组

Question

谁能帮我做一下幻灯片 up/down 过渡，我正在尝试为全屏弹出。我无法使用 CSSTransitionGroup 获得理想的上滑效果。可以在此处找到代码示例

如有任何帮助，我们将不胜感激。谢谢

Answer 1

我可以通过 react-motion 实现同样的效果。示例：

Answer 2

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

1) 您必须使用 import CSSTransitionGroup from 'react-addons-css-transition-group 而不仅仅是普通的旧过渡组包 - 它只添加生命周期挂钩，CSS 版本用于 add/remove 类

2) 要理解的最重要的事情是什么真正触发了动画。 CSS 过渡组通过将过渡类应用于进入和退出其 children 的子元素（通过键跟踪）来工作，但为了做到这一点 CSSTransitionGroup必须已经存在，是children有条件存在与否。在您的代码中，仅在弹出状态打开时添加 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 CSS 过渡组

React CSS Transition Group

reactjs

reactcsstransitiongroup