React CSS过渡小组 [英] React CSS Transition Group

问题描述

有人可以帮助我为我尝试创建的上/下滑动过渡吗? 全屏弹出窗口. 我无法使用CSSTransitionGroup获得所需的滑动效果. 可以在这里找到代码示例

任何帮助将不胜感激. 谢谢

解决方案

此处存在一些问题，很容易解决:

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属性进行动画处理，但是已在style属性中将高度显式设置为height: window.innerHeight.这将转换为HTML中的样式标签，该样式标签始终优先于任何CSS样式表规则，因此您的动画高度总是会丢失.删除它，动画将起作用-但是动画结束后将不会设置高度.您可以通过保留height: window.innerHeight并强制CSS定义的高度用height: 100vh !important;语法覆盖它来解决此问题(尽管实际上这是不好的CSS做法，因为当您创建更复杂的样式表时，它会引起自己的头痛，因为它会停止您的工作能够使用特异性)

这是一个有效的版本: https://codesandbox.io/s/W7Q8QP56W

为了对此做进一步的改进，我建议您将该组件的所有CSS移到一个样式表，以便它们可以正常使用特定性和级联来互相替代，或者使用类似opacity的动画(例如默认默认值为1，您无需在JS样式道具中进行设置)-无论如何，只要动画完成，react便会完全删除该元素，因此在关闭页面时不会阻止与该页面的交互，因此您可以自由编写硬代码使其达到整页高度

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

Any help would be much appreciated. Thanks

解决方案

Theres a few issues at play here, all easy to fix:

1) You must use import CSSTransitionGroup from 'react-addons-css-transition-group rather than just the plain old transition group package - that only adds lifecycle hooks, which the CSS version uses to add/remove classes

2) The most important thing to understand is what actually triggers an animation. CSS transition groups works by applying transition classes to child elements that are entering and exiting its children (kept track of by a key), but in order to do so the CSSTransitionGroup must exist already, it is the children that conditionally exist or not. In your code, by only adding the CSSTransition group itself when the popup state is open, means that it cannot monitor its children so it all just appears and dissappears with no transition. Therefore you must make CSSTransition group always be rendered, but then conditionally add the popup div as a child when the state is open...

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) You can see from the above I have also added the appear in case the animation is to happen on first mount - in your case its fine as has already rendered in the closed state first but worth noting here for future reference

4) Finally you are animating on the height property in CSS, but you have set the height explicitly to height: window.innerHeight in your style property. This will translate to the style tag in HTML, which always takes precedence over any CSS stylesheet rules, so your animated height always loses out to it. Remove that and your animation works - however the height will not be set after the animation ends. You can fix this by keeping your height: window.innerHeight and forcing the CSS defined heights to override it with the height: 100vh !important; syntax (although this is in fact bad CSS practice as causes its own headaches when you create more complex stylesheets, as it stops you being able to use specificity)

Here is a working version: https://codesandbox.io/s/W7Q8QP56W

For further improvement on this I suggest you either move all your CSS for this component to a stylesheet so they can work overriding each other as normal using specificity and the cascade, or use something like opacity to animate on instead (as the default default is 1 you wont need to set it in your JS style prop) - react will remove the element entirely once the animation is done anyway, so you wont be blocked interacting with the page when its closed so you are free to hard code it to the full page height

这篇关于React CSS过渡小组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！