Reactjs 如何在spring中按顺序逐个运行动画

我正在使用

react-spring

库，它对我有效，我想做的是，我想按顺序运行3个动画，现在所有3个动画一次运行，我们可以一个接一个地运行吗，在这里我添加了我的全部代码，有人可以查看一下，并帮助我解决这个问题吗？任何帮助我都会非常感激。如果你有任何其他动画库可以做同样的事情，那么请让我知道

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
    withRouter,
    NavLink
  } from "react-router-dom";
import ScrollToTop from "./scrollToTop";
import App from "./App";
import { useAuth0 } from "@auth0/auth0-react";
import {useSpring, animated} from 'react-spring';
//import { useGesture } from 'react-use-gesture';

const LoginButton = () => {
    const { loginWithRedirect, isAuthenticated, isLoading, error } = useAuth0();
    const scrollingLeft = useSpring({
        from: { transform: "translate(60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true,
        tension:170,
        friction:26,
        mass:1,
      });

      const scrollingRight = useSpring({
        from: { transform: "translate(-60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true,
        tension:170,
        friction:26,
        mass:1,
      });  

      const scrollingCenter = useSpring({
        from: { transform: "translate(-60%,0)" },
        to: { transform: "translate(0,0)" },
        config: { duration: 1000 },
        reset: true,
        tension:170,
        friction:26,
        mass:1,
      });  

      
    console.log('isLoading', isLoading, isAuthenticated, error)
    const isAuth = localStorage.getItem('isAuthenticated')
    console.log('isAuth', isAuth)
    if(!isAuth){
        if (isLoading) {
            return <div>Loading...</div>;
          }
    
        if (!isAuthenticated) {
            loginWithRedirect()
        } else {
            localStorage.setItem('isAuthenticated', isAuthenticated)
        }
    }

   

    


    return (
        <Router>
            <ScrollToTop />
            <Switch>
                <Route path="/app" component={App} />
                <Route path="/" exact>
                    <NavLink to="/app">
                        {" "}
                        
                        <div className="full_width">
                            <animated.div style={scrollingLeft} className="class_1">
                                <img src="https://cloudinary-res.cloudinary.com/image/upload/c_limit,h_540,w_770/f_auto,fl_lossy,q_auto/rzxcje2xocuicsxjevlviw.jpg" />
                            </animated.div>
                            <animated.div style={scrollingRight} className="class_2">
                                <img src="https://cloudinary-res.cloudinary.com/image/upload/c_limit,h_540,w_770/f_auto,fl_lossy,q_auto/rzxcje2xocuicsxjevlviw.jpg" />
                            </animated.div>
                            <animated.div style={scrollingCenter} className="class_3">
                                <table>
                                    <tr>
                                        <th>Header 1</th>
                                        <th>Header 2</th>
                                    </tr>
                                    <tr>
                                        <td>Test 1</td>
                                        <td>Test 2</td>
                                    </tr>
                                    <tr>
                                        <td>Test 1</td>
                                        <td>Test 2</td>
                                    </tr>
                                 </table>                                   
                            </animated.div>
                        </div>

                        <div>
                            <img src="site.png" className="welcome-screen" />
                        </div>
                    </NavLink>
                </Route>
            </Switch>
        </Router>
    );
};

export default LoginButton;

从“React”导入React；
进口{
BrowserRouter作为路由器，
转换
路线,，
重新使用
用路由器，
导航链接
}从“反应路由器dom”；
从“/ScrollToTop”导入ScrollToTop；
从“/App”导入应用程序；
从“@auth0/auth0”导入{useAuth0}”；
从“react spring”导入{useSpring，动画}；
//从“反应使用手势”导入{usespirture}；
常量登录按钮=（）=>{
const{loginWithRedirect，isAuthenticated，isLoading，error}=useAuth0（）；
const scrollingLeft=useSpring({
from:{transform:“translate（60%，0）”}，
到：{transform:“translate（20%，0）”}，
配置：{持续时间：1000}，
重置：正确，
张力：170，
摩擦：26，
质量:1,，
});
const scrollingRight=useSpring({
from:{transform:“translate（-60%，0）”}，
到：{transform:“translate（20%，0）”}，
配置：{持续时间：1000}，
重置：正确，
张力：170，
摩擦：26，
质量:1,，
});  
const scrollingCenter=useSpring({
from:{transform:“translate（-60%，0）”}，
到：{transform:“translate（0,0）”}，
配置：{持续时间：1000}，
重置：正确，
张力：170，
摩擦：26，
质量:1,，
});  
日志（'isLoading'，isLoading，isAuthenticated，error）
const isAuth=localStorage.getItem（'isAuthenticated'）
console.log（'isAuth'，isAuth）
如果（！isAuth）{
如果（孤岛加载）{
返回装载。。。；
}
如果（！已验证）{
loginWithRedirect（）
}否则{
localStorage.setItem（'isAuthenticated'，isAuthenticated）
}
}
返回(
{" "}
标题1
标题2
测试1
测试2
测试1
测试2
);
};
导出默认登录按钮；

我创建了一个示例。我使用useSpring钩子的onRest属性。但是在每个动画结束时调用onRest。所以我必须为第二个动画创建一个组件。我只在第一个动画完成时渲染它。我不会将最后一个动画放在单独的组件中，因为我们不使用它的onRest事件。代码如下：

import React from "react";

import { useSpring, animated } from "react-spring";
//import { useGesture } from 'react-use-gesture';

const ScrollLeft = ({ onRest }) => {
  const scrollingLeft = useSpring({
    from: { transform: "translate(60%,0)" },
    to: { transform: "translate(20%,0)" },
    onRest
  });

  return (
    <animated.div style={scrollingLeft} className="class_1">
      <img src="https://cloudinary-res.cloudinary.com/image/upload/c_limit,h_540,w_770/f_auto,fl_lossy,q_auto/rzxcje2xocuicsxjevlviw.jpg" />
    </animated.div>
  );
};

const ScrollRight = ({ onRest }) => {
  const scrollingRight = useSpring({
    from: { transform: "translate(-60%,0)" },
    to: { transform: "translate(20%,0)" },
    onRest
  });

  return (
    <animated.div style={scrollingRight} className="class_2">
      <img src="https://cloudinary-res.cloudinary.com/image/upload/c_limit,h_540,w_770/f_auto,fl_lossy,q_auto/rzxcje2xocuicsxjevlviw.jpg" />
    </animated.div>
  );
};

const LoginButton = () => {
  const [finished1, setFinished1] = React.useState(false);
  const [finished2, setFinished2] = React.useState(false);

  const scrollingCenter = useSpring({
    from: { transform: "translate(-60%,0)" },
    to: { transform: finished2 ? "translate(0,0)" : "translate(-60%,0)" },
    reset: true,
    tension: 170,
    friction: 26,
    mass: 1
  });

  return (
    <div className="full_width">
      <ScrollLeft onRest={() => setFinished1(true)} />
      {finished1 && <ScrollRight onRest={() => setFinished2(true)} />}
      <animated.div style={scrollingCenter} className="class_3">
        <table>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
          <tr>
            <td>Test 1</td>
            <td>Test 2</td>
          </tr>
          <tr>
            <td>Test 1</td>
            <td>Test 2</td>
          </tr>
        </table>
      </animated.div>
    </div>
  );
};

export default LoginButton;

从“React”导入React；
从“react spring”导入{useSpring，动画}；
//从“反应使用手势”导入{usespirture}；
常量ScrollLeft=（{onRest}）=>{
const scrollingLeft=useSpring({
from:{transform:“translate（60%，0）”}，
到：{transform:“translate（20%，0）”}，
休息
});
返回(