ReactCSSTransitionGroupはクラスを追加しません

Question

私は、Ajaxリクエストをロードしている記事リストの各リスト項目にアニメーションを追加しようとしています。 これは記事リストのコンポーネントですが、ReactCSSTransitionGroup要素は適用された項目には影響を与えません。クラスを追加しません。

import React from 'react'; 
 
import { ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText } from 'reactstrap'; 
 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 
 

 
export default ({ 
 
    articles 
 
}) => { 
 
    return (
 
    <div className="col-md-8 col-10 mx-auto"> 
 
     <ListGroup className="results"> 
 
     {articles.map((article, idx) => { 
 
      return (
 
      <ReactCSSTransitionGroup 
 
       transitionName="article" 
 
       transitionEnterTimeout={500} 
 
       transitionLeaveTimeout={300}> 
 
       <ListGroupItem key={idx}> 
 
       <ListGroupItemHeading> 
 
        <a target="_blank" href={`https://wikipedia.org/wiki/${article.title}`}> 
 
        {article.title} 
 
        </a> 
 
       </ListGroupItemHeading> 
 
       <ListGroupItemText dangerouslySetInnerHTML={{__html: article.snippet}}> 
 
       </ListGroupItemText> 
 
       </ListGroupItem> 
 
      </ReactCSSTransitionGroup> 
 
     ); 
 
     })} 
 
     </ListGroup> 
 
    </div> 
 
); 
 
};

これは私にナットを運転している、私は右のすべてをした、それだけで何の効果もありません。

Answer 1

実例hereがあります。

最初のマウント時にアニメーションを作成する場合は、transitionAppearが必要です。あなたのコードで

各項目transitiongroup 1グループはので、多分これが機能するよう、一例では、リストを持っています

import React from 'react'; 
import { ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText } from 'reactstrap'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 

export default ({ 
    articles 
}) => { 
    return (
    <div className="col-md-8 col-10 mx-auto"> 
     <ListGroup className="results"> 
     <ReactCSSTransitionGroup 
       transitionName="article" 
       transitionEnterTimeout={500} 
       transitionLeaveTimeout={300}> 
      {articles.map((article, idx) => { 
      return (
       <ListGroupItem key={idx}> 
        <ListGroupItemHeading> 
        <a target="_blank" href={`https://wikipedia.org/wiki/${article.title}`}> 
         {article.title} 
        </a> 
        </ListGroupItemHeading> 
        <ListGroupItemText dangerouslySetInnerHTML={{__html: article.snippet}}> 
        </ListGroupItemText> 
       </ListGroupItem> 
      ); 
      })} 
     </ReactCSSTransitionGroup> 
     </ListGroup> 
    </div> 
); 
}; 

をそれは多分あなたはcodepen例を提供することができていない場合。

Answer 2

私の解決策を見つけました。私がしなければならなかったのは、反応遷移グループのCSSTransitionGroupを使用することでした。なぜか分かりませんが、今は完全に機能しています。