1

我正在尝试 React Animation 的示例代码：

  1. https://reactjs.org/docs/animation.html
  2. https://github.com/reactjs/react-transition-group/tree/v1-stable

演示：

https://codesandbox.io/s/dark-forest-ofzfr?file=/src/App.js

        <CSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          {items}
        </CSSTransitionGroup>

它认为不App存在于index.js. 但是如果CSSTransitionGroup被一些静态文本替换，那么它就可以工作（没有任何动画效果）：

https://codesandbox.io/s/blue-dust-j0y57?file=/src/App.js

与以下相同ReactCSSTransitionGroup：
https ://codesandbox.io/s/quizzical-franklin-j2hhp?file=/src/App.js

它如何工作？

4

2 回答 2

1

您应该使用TransitionGroupandCSSTransition而不是ReactCSSTransitionGroupand CSSTransitionGroup 。代码如下所示

import React from "react";
import { TransitionGroup, CSSTransition } from "react-transition-group";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: ["hello", "world", "click", "me"] };
    this.handleAdd = this.handleAdd.bind(this);
  }

  handleAdd() {
    const newItems = this.state.items.concat([prompt("Enter some text")]);
    this.setState({ items: newItems });
  }

  handleRemove(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({ items: newItems });
  }

  render() {
    const items = this.state.items.map((item, i) => (
      <CSSTransition
        key={i}
        classNames="example"
        timeout={{ enter: 500, exit: 300 }}
      >
        <div key={item} onClick={() => this.handleRemove(i)}>
          {item}
        </div>
      </CSSTransition>
    ));

    return (
      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <TransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          {items}
        </TransitionGroup>
      </div>
    );
  }
}

export default App;

样式.css

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.example-exit {
  opacity: 1;
}
.example-exit.example-exit-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

您可以在代码和框中查看此处，查看此文档以获取有关从 v1 迁移到 v2 的更多信息

于 2021-04-20T02:47:52.903 回答
0

快速回答：截至 2021 年 4 月的 React 官方动画文档指向 v1 文档，但如果我们尝试使用 current 的解决方案react-transition-group，那么它将不起作用。原因是从 v2 向前，到当前的 v4 版本，它不向后兼容 v1。

因此，如果我们正在使用它或探索使用它，请转到文档并立即跳过与 v1 相关的任何信息。

于 2021-04-21T22:38:17.100 回答