2

使用 React Transition Group v2，我希望能够在文本元素和加载微调器之间平滑过渡。

没有任何CSSTransitionGroup元素，我有以下代码：

{isFetchingEvents ? (
  <LoadingSpinner />
) : (
  <div>Show More</div>
)}

我最初的和幼稚的处理方法是使用以下内容：

<CSSTransition
  in={isFetchingEvents}
  timeout={3000}
  classNames="marketGroupFade"
>
  <LoadingSpinner />
</CSSTransition>
<CSSTransition
  in={!isFetchingEvents}
  timeout={3000}
  classNames="marketGroupFade"
>
  <div>Show More</div>
</CSSTransition>

但这不是一个好的解决方案，因为三元运算符已经消失，并且in存在重复的 prop，以及重复的classNames. 它确实在两者之间进行了过渡，但是随着每个组件的进出，过渡是粗糙的。

是否有一个巧妙的解决方案可以在三元运算符中呈现的两个组件之间进行转换？

4

1 回答 1

2

我想我把这个作为答案。使用TransitionGroup组件。TransitionGroup是react-transition-group软件包提供的第三个组件。您评论链接中的那个问题是指第一级和最低级组件Transition。该TransitionGroup组件与CSSTransition或结合使用Transition。它处理in任何孩子CSSTransition或Transition. 当两者之一放置在其中时in，将子项上的道具设置为true，反之亦然，当子项被移除时，当您需要更灵活时，您可以使用functionas children 模式将状态传递给转换并手动设置in支柱。查看以下示例和 CodePen 了解更多详细信息，您还可以查看文档这里

// Create CSSTransition Higher Order Component
const slideHOC = (InputComponent) => {
   return props => (
     <CSSTransition {...props}>
       <InputComponent className="slide" />
     </CSSTransition>
   );
};

// Create CSSTransition components it can be a list but it doesn't have to be.
const groupItems = [ 
  {
    id: uuid.v4(),
    element: slideHOC(props => (<h3 {...props}>Hello</h3>))
  }, { 
    id: uuid.v4(),
    element: slideHOC(props => (<h3 {...props}>World!</h3>))
  },
];

// Reusable CSSTransition props
const transProps = {
  appear: true,
  timeout: {
    enter: 350,
    exit: 500,
  },
  classNames: "slide",
};

// And add this somewhere in your render component 
<TransitionGroup
   className="test-component-one"
   childFactory={child => React.cloneElement(child, transProps)}
>
  {groupItems.map(({ id, element: Element }) => {
    return (<Element {...transProps} key={id} />)
  })}
</TransitionGroup>

// If you want to map an array to can do it like so. Note the key prop on the
// instances of FadeHOC must be set and unique to the CSSTransition for the
// childFactory to work.
FadeHoc = faceHOC(props => (<h3 {...props}>Hello</h3>));
<TransitionGroup
   className="test-component-one"
   childFactory={child => React.cloneElement(child, transProps)}
>
  <FadeHOC {...transProps} key={id} />
  <FadeHOC {...transProps} key={id} />
</TransitionGroup>

// Or if you want more flexibility you can do something like this
<TransitionGroup
   className="test-component-one"
   childFactory={child => React.cloneElement(child, transProps)}
>
  {(state) => (
    <FadeHOC in={state === 'entered'} {...transProps} key={id} />
    <FadeHOC in={state === 'exited'} {...transProps} key={id} />
  )}
</TransitionGroup>

CodePen来看看它的实际效果。

TransitionGroup还能够继续渲染尚未安装在childFactory道具进入的位置的项目。虽然我不完全确定它的每个部分是如何工作的。它的所有子元素并将它们包装在一个容器组件中，即使在子元素被卸载后也可以渲染它。这样exit动画就可以动画化了。

于 2018-09-27T21:17:29.320 回答