反应-转化组.从 .v1 迁移到 .v2 后，转换不起作用

Question

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

我的动画逻辑是：

我们有一个组件数组，他的每个孩子都通过onClick操作在<TransitionGroup>API中一个接一个地出现。每个新的收入组件都可以顺利替换和隐藏以前的收入组件，这些组件已经存在于<Transition>API 中。

我几乎完成了在 .v2react-trancition-group释放这种纠结，但有一件事仍未解决 - 已经在 API 中的组件在<Transition>新的组件覆盖他后不会消失，这在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>
)

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