0

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

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

一个例子可能是（如果我要单击类别 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 时。它在视觉上令人不快。尽管淡入淡出在技术上是有效的，但它完全被旧元素在很短的时间内逗留而不是被正确卸载的事实所破坏。

4

1 回答 1

1

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

也许那里有一个更好的库，但是很容易滚动你自己的“淡入”组件，它只是在显示时动画，而不是隐藏。它可能更适合您的用例 - 这就是我所做的：

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;
  }
}
于 2017-01-19T15:47:12.887 回答