javascript - 带有 React 和 Redux 的 TransitionGroup : replace old element with animation

Question

考虑一个用例:一个内部有文本的 block (文本是从存储中获取的)。当文本更改时 - block 会平滑消失并出现另一个 block 。

为了更好地说明伪代码:

import TransitionGroup from 'react-addons-transition-group'

@connect((state) => ({text: state.text}))
class Container extends React.Component {
  render() {
    return (
      <div>
        <TransitionGroup>
          <Block key={this.props.text}/> // change block when text changes
        </TransitionGroup>
      </div>
    )
  }
}

@TransitionWrapper() // pass componentWillEnter through wrapper
@connect((state) => ({text: state.text}), null, null, {withRef: true})
class Block extends React.Component {
componentWillEnter(callback) {
    // fancy animations!!!
    const el = ReactDOM.findDOMNode(this); 
    TweenMax.fromTo(el, 1, { 
      alpha: 0, 
    }, { 
      alpha: 1, 
      onComplete: callback 
    }); 
  }

  componentWillLeave (callback) { 
    const el = ReactDOM.findDOMNode(this); 
    TweenMax.to(el, 1, { 
      alpha: 0, 
      onComplete: callback 
    }); 
  }

  render() {
     return (
       <div>{this.props.text}</div>
     )
   }
}

当 state.text 改变时会发生什么？

1. 出现新的Block，因为key已更改； componentWillEnter 为其启动动画。太棒了。
2. 旧 block 重新渲染，并且componentWillLeave为其启动动画。
3. 当第一个动画完成时，重新渲染会再次发生。

问题是第 2 步:旧元素应该随旧数据一起消失，但由于重新渲染，它会将其内容更改为来自 store 的新内容，因此用户会看到以下内容:

1. store.text = 'Foo'。用户在屏幕上看到一个带有文本“Foo”的 block 。
2. store.text = '酒吧'。用户看到两个 block ，屏幕上都带有文本“Bar”。一个区 block 正在消失。
3. 动画结束，用户在屏幕上看到一个带有文本 Foo 的 block 。

我相信现在使用过渡非常常见，这应该是一个常见问题，但令我惊讶的是我找不到任何相关内容。我能想到的最好的想法是在元素即将离开时“卡住”元素上的 Prop (或传递以前的 store，因此它会使用以前的数据重新渲染)，但对我来说感觉很hacky。

解决这个问题的最佳方法是什么？

Answer 1

我们在 redux store 上遇到了同样的问题，因为当数据被删除时，props 不包含任何内容，因此，当卸载动画发生时，UI 将不会显示任何数据。

我认为使用旧的存储或状态是很hacky的(打破了React生命周期的约定)，如果没有可用数据，您可以使用加载占位符，例如

if (!this.props.text){
   return <EmptyPlaceholder />
}

而且动画时长很小，300毫秒，用户体验不会差。

或者，您需要定义一个类实例变量，例如:

componentWillMount(){
       if(this.props.text){
         this.text = this.prop.text;  
       }
    }

然后渲染文本，如

<Block key={this.props.text || this.text}/>

那么当卸载动画发生时，旧文本将始终存在。我在我的项目上进行了测试，效果非常好。希望对你有帮助，如果没有请私信我。