React春季动画仅在第一次渲染时起作用

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

您的问题是因为您的Key没有更新。由于您将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