Question

我有一个Component，可以在List中向用户动态显示值，我希望能够根据state来动画列表的打开和关闭。我选择React Transition Group是因为它是React的一个非常低俗的Animation lib。但是由于组件的动态特性，我无法为主体的打开和关闭设置动画。

这就是我能够尝试的stackblitz

Answer 1

好的，这是我的第一个TransitionGroup示例。它似乎有效。在viewMore.js中，将返回值更改为此：

  return (
    <>
      {header}
      <TransitionGroup component="ul">
        {listView.slice(0, maxItems).map((data, index) => (
          <CSSTransition
            timeout={500}
            classNames="fade"
            key={data}
          >
            <li>{data}</li>
          </CSSTransition>
        ))}
        {constructShowMoreFooter()}
      </TransitionGroup>
    </>
  )

并将其添加到style.css：

.fade-enter {
  max-height: 0;
  opacity: 0;
}

.fade-enter-active {
  max-height: 30px;
  opacity: 1;
  transition: all 500ms;
}

.fade-exit {
  max-height: 30px;
  opacity: 1;
}

.fade-exit-active {
  max-height: 0;
  opacity: 0;
  transition: all 500ms;
}

这是示例： https://stackblitz.com/edit/react-nczgpx?file=index.js

使用动态内容对组件打开和折叠动画进行反应

1 个答案: