Question

在my question on Transitions之后，我对面对2个问题的代码做了一些更新。第一个是最后一个没有动画的元素。当数组中有两个相等的值连续时，发生第二个。

我知道为什么：过渡的关键是相同的，所以React-spring不处理动画。我只是还没有弄清楚如何确保密钥是唯一的。（在给定的示例中：查看连续的a的动画效果）

以下是说明两个问题的代码沙箱：https://codesandbox.io/s/01672okvpl

和代码：

import React from "react";
import ReactDOM from "react-dom";
import { Transition, animated, config } from "react-spring";

import "./styles.css";

class App extends React.Component {
  state = { fake: ["a", "a", "b", "c", "d", "e", "f"] };

  fakeUpdates = () => {
    const [head, ...tail] = this.state.fake.reverse();
    this.setState({ fake: [...tail, head].reverse() });
  };

  componentDidMount() {
    setInterval(this.fakeUpdates, 2000);
  }

  componentWillUnmount() {
    clearInterval(this.fakeUpdates);
  }

  render() {
    const { fake } = this.state;
    return (
      <div className="App">
        {fake.map((entry, index) => (
          <Transition
            native
            from={{
              transform: `translateY(${index === 0 ? "-200%" : "-100%"})`
            }}
            enter={{ transform: "translateY(0)" }}
            leave={{ transform: "translateY(100%)" }}
            config={config.slow}
            key={`${index}_${entry}`}
          >
            {styles => <animated.div style={styles}>{entry}</animated.div>}
          </Transition>
        ))}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

春季休假无法正常工作

0 个答案: