javascript - react 转移组。从 .v1 迁移到 .v2 后转换不起作用

Question

我正在尝试将我的应用程序从旧应用程序迁移到新应用程序 React-trancition-group API，但是如果使用手册的话就不那么容易了<Transition>用于特定 React 组件的转换创建的模式。

我的动画逻辑是:

我们有一个组件数组，他的每个 child 都一一出现在 <TransitionGroup> 中。 API onClick行动。每一个新的收入组成部分都会顺利地取代和隐藏之前的收入组成部分，这已经存在于 <Transition> 中。 API。

我快要在 react-trancition-group 中解开这个纠结了.v2，但有一件事仍然没有解决 - 组件，已经在 <Transition> 中API 在新 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>
)

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