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

Question

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

我的动画逻辑是：

我们有一个组件数组，他的每个 child 在 <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 - 发生这种情况是因为您没有更改 Transition 组件的状态标志 in。你总是给他设置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 后，转换不起作用

React-trancition-group. Transition does not work after migration from .v1 to .v2

javascript

reactjs

animation

react-transition-group