无法通过反应弹簧获得链条效应与使用链

Question

我是使用react spring的新手。目前(用typescript编写一个react web应用程序(，我正在尝试应用useChain链接三个useSpring，但我得到的是所有动画都同时开始。。。。。但我想它应该有链式动画效果(动画一个接一个地运行(。。。如果有人能给我一些提示或经验分享，我将不胜感激。提前谢谢。

下面的第一部分是我用一个按钮来启动链接的useSpring动画。(事实上，如果有人知道的话，我也发现它不允许我把我想改变的东西放在"to"值中……相反，如果我把我放在"from"to"to"……就像下面一样……这与我从react spring主页学到的不同，我应该被允许把我想从"fro"改为"to"m〃(

const [move, setMove] = useState(false)
const text1Ref = useRef(null);
const text2Ref = useRef(null);
const text3Ref = useRef(null);
const text1Style = useSpring({
from: {zIndex: 1, left: "25%", top: "50%", transform: `translate(-50%,-50%)`},
to: {zIndex: 1, left: "25%", top: "50%", transform: move? `translate(-50%,-20%)` : `translate(-50%,-50%)`},
ref: text1Ref,
})

const text2Style = useSpring({
from: {zIndex: 1, left: "50%", top: "50%", transform: `translate(-50%,-50%)`},
to: {zIndex: 1, left: "50%", top: "50%", transform: move? `translate(-50%,-100%)` : `translate(-50%,-50%)`},
ref: text2Ref,
})
const text3Style = useSpring({
from: {zIndex: 1, left: "75%", top: "50%", transform: `translate(-50%,-50%)`},
to: {zIndex: 1, left: "75%", top: "50%", transform: move? `translate(-50%,-30%)` : `translate(-50%,-50%)`},
ref: text3Ref,
})

useChain([text1Ref, text2Ref, text3Ref])

我甚至试着把timeSteps放在下面。。。它没有显示任何延迟

useChain([text1Ref, text2Ref, text3Ref], [0, 0.9))

下面是我想要的三个div；向上移动"；或"；向下移动"；在链式效果下按下按钮后。

<animated.div style={text1Style} className="drawer" >Top 1</animated.div>
<animated.div style={text2Style} className="drawer" >Top 2</animated.div>
<animated.div style={text3Style} className="drawer" >Top 3</animated.div>

我之前尝试过升级到V9，但由于某些原因，还有一些其他的动画无法使用V9，所以我回到了V8。

Answer 1

我认为这是版本8中的一个问题。试着把版本调高一点。它从9.0.0-beta.4版本开始工作。或者，您可以尝试转到9.0.0-rc.3版本。但在这种情况下，由于api的变化，您必须修改代码。

这是版本9 api的文档。https://aleclarson.github.io/react-spring/v9/#Revamped-类型

如果你想长期维护你的项目，我建议你迟早要更改到最新的9版本。

以下是beta 4的工作示例：

https://codesandbox.io/s/usechain-example-r3ngb