相关疑难解决方法(0)

React - 动画装载和卸载单个组件

这个简单的东西应该很容易实现,但是我把头发拉出来是多么复杂.

我想做的就是动画安装和卸载React组件,就是这样.这是我到目前为止所尝试的以及为什么每个解决方案都不起作用:

  1. ReactCSSTransitionGroup - 我根本不使用CSS类,它是所有JS样式,所以这不起作用.
  2. ReactTransitionGroup - 这个较低级别的API很棒,但它要求你在动画完成时使用回调,所以只使用CSS过渡在这里不起作用.总有动画库,这导致下一点:
  3. GreenSock - 许可证对于商业用途IMO来说过于严格.
  4. React Motion - 这看起来很棒,但是TransitionMotion对于我需要的东西来说却非常混乱和过于复杂.
  5. 当然我可以像Material UI那样做一些技巧,其中元素被渲染但保持隐藏(left: -10000px)但我宁愿不去那条路线.我认为它很hacky,我希望卸载我的组件,以便清理它们并且不会使DOM混乱.

我想要一些易于实现的东西.在mount上,动画一组样式; 在卸载时,为相同(或另一组)样式设置动画.完成.它还必须在多个平台上具有高性能.

我在这里碰到了一堵砖墙.如果我遗漏了一些东西并且有一个简单的方法可以做到这一点,请告诉我.

animation css-animations greensock reactjs react-motion

73
推荐指数
6
解决办法
4万
查看次数