ReactCSSTransitionGroup：新たに実装された要素とともに短期間に実装されている要素をそのまま残しておきます

Question

カテゴリを表すボタンのグループを含む比較的単純な使用例があります。

これらのカテゴリボタンの1つをクリックすると、対応するサブカテゴリが下のセクションに表示されます。これらのカテゴリボタンの1つをクリックすると、クリックしたカテゴリに応じてサブカテゴリのリストが新しいサブカテゴリに置き換えられます。 （私はカテゴリーAをクリックした場合）

例は次のようになります。私はすでに1をクリックした後に別のカテゴリをクリックすると

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

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

今、問題が起こります。私は、前のアクションのサブカテゴリが短時間の間視界に残っていることに気づきます。例えばこれは、置換要素から取得し、私はすでに私はカテゴリーBをクリック

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

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

にもかかわらずカテゴリーAにクリックした後、カテゴリーBをクリックしたときに何が起こるかのスナップショット、およびサブカテゴリーのリストです。サブカテゴリー（カテゴリーA）の以前のリストは、短時間（数百ミリ秒で）載置されたままである。

これは、ReactCSSTransitionGroupタグにサブカテゴリセクションをラップする場合にのみ発生します。各サブカテゴリのキーはサブカテゴリの文字列名です。データベース内で一意であるため、設定されているキーに問題があるとは思われません。 ReactCSSTransitionGroupを使用している場合にのみ発生し、再び

.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 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ファイルでアニメーションコードです：ここで

は私のReactCSSTransitionGroupマークアップのためのコードです。そしてそれは視覚的に不快です。フェードが技術的に働いているにもかかわらず、古い要素が適切にアンマウントされるのではなく、短い時間だけ残っているという事実によって、それは完全に台無しです。

Answer 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' 

LESS：

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