反应-trancition组。 从.v1迁移到.v2后，过渡不起作用

Question

我正在尝试将我的应用程序从旧版本迁移到新的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 Component中更改状态标志。 你为他设置的永远是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>
)

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