ReactCSSTransitionGroup：出路的元素在短时间内与新安装的元素一起保持安装状态

Question

我有一个相对简单的用例，涉及一组按钮，每个按钮代表一个类别。

单击其中一个类别按钮后，其对应的子类别将出现在下面的部分中。当您单击这些类别按钮之一时，子类别列表将替换为新的子类别，具体取决于您刚刚单击的类别。

例如（如果我单击类别 A）：

[Category A(Clicked)] [Category B] [Category C]
_______________________________________

[Sub-Category A1] [Sub-Category A2] [Sub-Category A3]

现在，当我在已经单击一个类别后单击另一个类别时，就会出现问题。我注意到先前操作的子类别在短时间内持续存在于视图中。例如，这是我在点击类别 A 后点击类别 B 时发生的情况的快照。

[Category A] [Category B (Clicked)] [Category C]
_______________________________________

[Sub-Category B1] [Sub-Category B2] [Sub-Category B3] [Sub-Category A1]

即使我点击了类别 B，子类别列表被替换，之前子类别列表（类别 A）中的元素仍然挂载了很短的时间（数百毫秒）。

只有当我将子类别部分包装在 ReactCSSTransitionGroup 标签中时才会发生这种情况。我的每个子类别的键是子类别的字符串名称，因为它们在我的数据库中都是唯一的，所以我认为我的问题与设置的键无关。

这是我的 ReactCSSTransitionGroup 标记的代码：

<ReactCSSTransitionGroup transitionName="products" transitionEnterTimeout={0} transitionLeaveTimeout={0}>
    {   
     this.state.subCategories != null
    ?
     this.state.subCategories.map((subCategoryName, index) => {
        return(
            <div className="product-sub-category" key={subCategoryName}>
                <div className="product-image windows"><div className="overlay"><div className="wrap"><div className="category-title">{subCategoryName}</div><div className="category-subcategories">Sub-Categories: <span className="num">1</span></div></div></div></div>
            </div>)
                        })
    :
     null
   }
</ReactCSSTransitionGroup>

这是我的动画 css 文件中的动画代码：

.products-enter {
 opacity: 0.01;
}

.products-enter.products-enter-active {
 opacity: 1;
 transition: opacity 100ms ease-in;
}

.products-leave {
 opacity: 1;
}

.products-leave.products-leave-active {
  opacity: 0.01;
  transition: opacity 100ms ease-in;
 }

同样，这仅在使用 ReactCSSTransitionGroup 时发生。而且它在视觉上令人不快。尽管淡入淡出在技术上是有效的，但由于旧元素在短时间内徘徊而不是正确卸载这一事实，它完全被毁了。

Answer 1

这是设计使然。 Fade in/out with ReactCSSTransitionGroup 最适合独立插入和删除的项目列表。对于您的用例，效果不佳。

也许那里有更好的库，但滚动您自己的 'FadeIn' 组件非常容易，它只是在显示时显示动画，而不是隐藏。它可能更适合您的用例 - 这就是我所做的：

import React, {PropTypes as T} from 'react'
import classnames from 'classnames'

export default class FadeIn extends React.Component {
  constructor(...args) {
    super(...args)
    this.state = {active: false}
  }

  componentDidMount() {
    setTimeout(() => this.setState({active: true}), 0)
  }

  render() {
    const {active} = this.state
    return (
      <div className={classnames('fade-in', {active}, this.props.className)}>
      {this.props.children}
      </div>
    )
  }
}

FadeIn.propTypes = {
  className: T.string
}

FadeIn.displayName = 'FadeIn'

少：

.fade-in {
  opacity: 0;
  &.active {
    opacity: 1;
    transition: opacity 0.15s ease-in;
  }
}

ReactCSSTransitionGroup：出路的元素在短时间内与新安装的元素一起保持安装状态

ReactCSSTransitionGroup: Elements on their way out stay mounted along with newly mounted elements for a short time

javascript

reactjs

reactcsstransitiongroup