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。

在你的代码中，每一项都是一个转换组，示例中将列表作为一个组，所以这可能是可行的：

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>
  );
};

如果不是这样，也许你可以提供一个代码示例。

Answer 2

我找到了问题的解决方案，我所要做的就是使用react-transition-group中的CSSTransitionGroup。我不知道为什么，但它现在工作得很好。