1

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

我的动画逻辑是：

我们有一个组件数组，他的每个孩子在<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

```

4

1 回答 1

1

所以，你的问题很典型。正如您在此处所写：the component, that already been in <Transition> API does not disappear after the new one is overlayed him- 发生这种情况是因为您没有更改Component的状态标志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>
)

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

于 2018-11-15T16:19:35.927 回答