反应组件打开和折叠动画与动态内容

Question

我有一个组件，它在列表中动态地向用户显示值，我希望能够根据状态为列表的打开和关闭设置动画。我选择 React Transition Group，因为它是 React 的一个非常低层的动画库。但是由于我的组件的动态特性，我无法为 body 打开和关闭设置动画。

这是我能够尝试的stackblitz

Answer 1

好的，这是我的第一个 TransitionGroup 示例。它似乎工作。在 viewMore.js 中将 return 更改为：

  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

反应组件打开和折叠动画与动态内容

React Component Open and Collapse Animation with dynamic content

animation

reactjs

react-transition-group