Question

我正在尝试将我的应用程序从旧的API迁移到新的React-trancition-group API，但是要使用手动<Transition>模式来创建特定React组件的过渡过程并不容易。

我的动画逻辑是：

我们有一系列的组件，他的每个孩子在<TransitionGroup> API中通过onClick动作来一个接一个。 <Transition> API中已经存在的每个新收入组成部分都可以平滑地替换并隐藏先前的收入组成部分。

我几乎在react-trancition-group .v2中释放了这个纠结，但是仍然没有解决一件事-<Transition> API中已经存在的组件在新的覆盖他之后不会消失，而是自动在react-trancition-group .v1中发生的。所以现在它们都堆叠在一起了...

所以，也许您可以看一下我的代码，然后幸运地说出我的问题在哪里...

感谢您的帮助。谢谢您的时间

我的代码：

import React, { Component } from 'react'
import { findDOMNode } from 'react-dom'
import { TweenMax, Power1 } from 'gsap'
import { Transition } from 'react-transition-group'

class Slider extends Component {
  _onEntering = () => {
    const { id, getStateResult, isCurrentRow, removeAfterBorder, calcHeight } = this.props

    const el = findDOMNode(this)

    const height = calcHeight(el)

      TweenMax.set(el.parentNode, {
        height: `${height}px`
      })

      TweenMax.fromTo(
        el,
        0.5,
        {
          y: -120,
          position: 'absolute',
          width: `${100}%`,
          zIndex: 0 + id
        },
        {
          y: 0,
          width: `${100}%`,
          zIndex: 0 + id,
          ease: Power1.easeIn
        }
      )
  }

  _onEntered = () => {
    const { activeButton, removeAfterBorder, getCurrentOutcome } = this.props
    findDOMNode(this)
  }

  _onExiting = () => {
    const el = findDOMNode(this)

    TweenMax.to(el, 2, {
      onComplete: () => {
         el.className = ''
      }
    })
  }

  _onExited = () => {
    const { getStateResult } = this.props

    getStateResult(true)
  }

  render() {
    const { children } = this.props

    return (
      <Transition
        in={true}
        key={id}
        timeout={2000}
        onEntering={() => this._onEntering()}
        onEntered={() => this._onEntered()}
        onExiting={() => this._onExiting()}
        onExited={() => this._onExited()}
        unmountOnExit
      >
        {children}
      </Transition> || null
    )
  }
}

export default Slider

```

Answer 1

因此，您的问题非常普遍。正如您在此处编写的那样：the component, that already been in <Transition> API does not disappear after the new one is overlayed him-之所以发生，是因为您没有更改in组件的状态标志Transition。您总是为他设置true，这是不对的。

顺便说一句，您需要了解您打算在代码中做什么。方法<Transition></Transition>和<TransitionGroup><CSSTransition></CSSTransition><TransitionGroup>之间有很大的不同。仅在极少数情况下需要显式处理动画场景时，才需要使用纯<Transition></Transition> API。

正如我在您的代码中看到的那样，您试图将一个组件替换为另一个组件，在这种情况下，您需要使用上面提供的第二种方法。

因此，请尝试以下操作：

import { TransitionGroup, CSSTransition } from 'react-transition-group'

  ...some code

return (
<TransitionGroup>
  <CSSTransition
    key={id}
    timeout={2000}
    onEntering={() => this._onEntering()}
    onEntered={() => this._onEntered()}
    onExiting={() => this._onExiting()}
    onExited={() => this._onExited()}
    unmountOnExit
  >
    {children}
  </CSSTransition> || null
</TransitionGroup>
)

它应该可以帮助您，并通过正常相互叠加来开始渲染元件。

React-trancition-group。从.v1迁移到.v2后，过渡不起作用

1 个答案: