Question

使用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道具的重复存在，以及classNames的重复。它确实在两者之间进行过渡，但随着每个组件的进出，过渡很粗糙。

是否有一个简洁的解决方案来在两个组件之间进行转换，这些组件将在三元运算符中呈现？

Answer 1

我以为这是答案。使用cf apps组件。 TransitionGroup是TransitionGroup软件包提供的第三个组件。您评论中的link中的问题是指第一级和最低级组件react-transition-group。 Transition组件与TransitionGroup或CSSTransition结合使用。它可以处理任何子Transition或in上的CSSTransition道具。当将两者之一放置在里面时，将孩子身上的Transition道具设置为in，反之亦然。将孩子移除后，如果您需要更灵活的道具，可以使用{{1} }作为子模式，将状态传递到过渡并手动设置true道具。请看下面的示例和CodePen以获得更多详细信息，您还可以查看文档here

function

CodePen来查看实际效果。

in还具有继续渲染// 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>道具所在位置尚未挂载的项目的能力。尽管我不太确定它的每个部分如何工作。它将所有其子元素都包装在一个容器组件中，以便即使在卸载子组件后也可以对其进行渲染。这样TransitionGroup动画可以被动画化。

在两个组件之间转换与有状态值相关联

1 个答案: