0

Can someone help me with slide up/down transition that I am trying to create for a fullscreen popup. I am unable to get the desired ease in slide up effect using CSSTransitionGroup. The code example can be found here

Edit Material UI

Any help would be much appreciated. Thanks

4

2 回答 2

6

这里有几个问题，都很容易解决：

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 将完全删除元素，因此当页面关闭时您不会被阻止与页面交互，因此您可以自由地将其硬编码到整个页面高度

于 2017-07-04T10:04:21.327 回答
0

我可以通过 react-motion 达到同样的效果。例子：

编辑材质 UI

于 2017-07-04T07:44:03.367 回答