Question

我试图将动画添加到我加载ajax请求的文章列表的每个列表项中。这是文章列表的组件，但ReactCSSTransitionGroup元素对它应用的项目没有影响：它不会添加类。

＆＃13;

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

＆＃13;

这让我疯了，我做的一切都没事，它只是没有任何效果。

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示例。

Answer 2

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

ReactCSSTransitionGroup不添加类

2 个答案: