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

Question

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

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

示例如下(如果我单击类别 A):

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

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

现在，当我在单击一个类别后单击另一个类别时，就会出现问题。我注意到上一个操作的子类别会在短时间内持续出现在 View 中。例如，这是我在单击类别 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

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