Css 反应样式化组件，动画：反转两个div的位置

我试着看了很多关于这个问题的资料，但是我没有找到一个能真正帮助我解决这个问题的答案。在文章的最后，你会找到我看到的文档和链接

问题

我有这个表单，我的目标是制作一个动画，反转两列的位置：因此右列将位于右侧，白色列位于左侧。仅当我单击按钮“注册”时，此动画才会开始

代码

import React，{setState，useState}来自“React”；
从“样式化组件”导入样式化；
从“../../components/Form/index”导入表单；
常量行=styled.div`
显示器：flex；
弯曲方向：“行”；
柔性包装：包装；
宽度：100%；
盒影：0px 0px 100px 0px#000；
边界半径：10px；
`
const Column=styled.div`
边界半径：10px 0px 0px 10px；
显示器：flex；
弯曲方向：立柱；
弹性基准：100%；
弹性：1；
对齐项目：居中；
高度：500px；
背景：线性渐变（rgba（0,0,0,0.4），rgba（0,0,0,0.1）），url(https://i.ibb.co/YcXymy8/green-Login-Background.jpg);
证明内容：中心；
填充：30px；
const DoubleColumn=styled.div`
显示器：flex；
弯曲方向：立柱；
弹性基准：100%；
弹性：2；
对齐项目：居中；
`
const Title=styled.h1`
颜色：#ffffff；
字体大小：40px；
字号：700；
文本对齐：居中；
`
常量P=styled.P`
颜色：白色；
文本对齐：居中；
字体大小：20px；
字体大小：400；
`
const Button=styled.Button`
边框：1px实心#fff；
边界半径：20px；
高度：50px；
宽度：180px；
背景色：透明；
颜色：白色；
字体大小：20px；
光标：指针；
过渡：0.3s；
&：焦点{
大纲：0；
}
&：悬停{
背景色：#fff；
颜色：#089B52；
边框：2个实心#ffffff；
边界半径：20px；
盒影：1px 2px 10px 1px#000；
}
&：活动{
宽度：177px；
高度：48px；
盒影：0px 0px 0px；
}
`
const ButtonContainer=styled.div`
显示器：flex；
对齐内容：居中对齐；
证明内容：中心；
高度：50px；
宽度：180px；
`
函数签名（）{
const[signUp，setSignUp]=useState（true）；
返回(
欢迎回来
 输入查看您的表格和计划。您是新的吗？单击下面的按钮！
setSignUp（！signUp）}>注册
)
}
导出默认签名；

我的尝试

我想将

行的方向更改为
行反转
，但此属性不可设置动画，与align self相同

现在我想不出怎么做了

考虑和访问的链接

我在两个不同的视图中组织了登录，一个用于注册，一个用于登录，也许我可以在路由两个组件之间设置动画



您可以为相关组件使用2个
关键帧
和动画
变换：translateY（100%）
或
变换：translateY（-100%）
（调整百分比值）
过渡组可能是一个解决方案？您可以使用2个关键帧和
变换：translateY（100%）
或
transform:translateY（-100%）
也许可以调整百分比值Shello Rebecca，我用了你的建议，效果很好。如果你想写答案，我会签字确认正确。
import React, {setState, useState} from 'react';
import styled from 'styled-components';
import Form from '../../components/Form/index'; 

const Row = styled.div `
  display: flex;
  flex-direction: 'row';
  flex-wrap: wrap;
  width: 100%;
  box-shadow: 0px 0px 100px 0px #000;
  border-radius: 10px;
`

const Column = styled.div `
  border-radius: 10px 0px 0px 10px; 
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  align-items: center;
  height: 500px; 
  background:linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) ), url(https://i.ibb.co/YcXymy8/green-Login-Background.jpg);
  justify-content: center;
  padding: 30px;

const DoubleColumn = styled.div `
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2;
  align-items: center;
`

const Title = styled.h1 `
  color: #ffffff;
  font-size: 40px;
  font-weight: 700;
  text-align:center;
`
const P = styled.p `
  color: white;
  text-align:center;
  font-size: 20px;
  font-weight: 400;
`

const Button = styled.button `

  border: 1px solid #fff;
  border-radius: 20px;
  height: 50px;
  width: 180px;
  background-color: Transparent;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: 0.3s;
  &:focus {
    outline: 0;
  }
  &:hover {
    background-color: #fff;
    color: #089B52;
    border: 2px solid #ffffff;
    border-radius: 20px;
    box-shadow: 1px 2px 10px 1px #000;
  }
  &:active {
    width: 177px;
    height: 48px;
    box-shadow: 0px 0px 0px;
  }
`

const ButtonContainer = styled.div `
  display:flex;
  align-content:center;
  justify-content:center;
  height: 50px;
  width: 180px;
`

function SignIn() {
  const [signUp, setSignUp] = useState(true);


  return (
    <Row signUp={signUp}>
        <Column>
          <Title>Welcome Back</Title>
            <P>Enter to see your tables and your plan. Are you new ? click on the button below!</P>
          <ButtonContainer>
            <Button onClick = {() => setSignUp(!signUp)}>Sign up</Button>
          </ButtonContainer>
        </Column>
        <DoubleColumn>
          <Form />
        </DoubleColumn>
      </Row>
  )
}

export default SignIn;