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

如果没有，也许你可以提供一个 codepen 示例。