javascript - ReactCSSTransitionGroup:即将退出的元素会在短时间内与新安装的元素保持安装状态

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

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

例如（如果我要单击类别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时发生。而且在视觉上令人不快。即使从技术上讲渐变效果很好，但由于旧的元素会在很短的时间内徘徊而不是正确卸下来，因此这完全被破坏了。

最佳答案

那是设计使然。使用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;
  }
}

关于javascript - ReactCSSTransitionGroup:即将退出的元素会在短时间内与新安装的元素保持安装状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41745778/