Question

我尝试为数组中的新条目添加react-spring的动画效果，在第一次渲染时效果很好，但是在更新时却没有动画效果

这是一个代码沙箱，我在其中以一定间隔重现了该问题：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", "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%"})`
            }}
            to={{ transform: "translateY(0)" }}
            config={config.slow}
            key={index}
          >
            {styles => <animated.div style={styles}>{entry}</animated.div>}
          </Transition>
        ))}
      </div>
    );
  }
}

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

我尝试使用Spring和Transition获得相同的结果。

Answer 1

您的问题是因为您的密钥没有更新。由于您将0的键替换为0的键，因此它认为它已经应用了过渡。

将键更改为${entry}_${index}时，它将把它们的键更新为“ a_0”，然后更新为“ f_0”，这是唯一且不同的，因此会触发您想要的效果。

entry单独作为密钥也不起作用，因为它已经存在于DOM中，因此不会重新呈现过渡。

<Transition
  native
  from={{
    transform: `translateY(${index === 0 ? "-200%" : "-100%"})`
  }}
  to={{ transform: "translateY(0)" }}
  config={config.slow}
  key={`${entry}_${index}`}
>

在这里https://codesandbox.io/s/kkp98ry4mo

检查

React-spring动画仅在第一次渲染时有效

1 个答案: