css - React 样式组件，动画 : invert the position of two divs

Question

我试图查看很多关于它的 Material ，但我没有找到真正可以帮助我弄清楚如何解决这个问题的答案。在帖子的末尾，您会找到我看到的文档和链接。

问题

我有这个表格，我的目标是制作一个颠倒两列位置的动画:所以右列将出现在右侧，白色列出现在左侧。只有当我点击按钮 Sign up 时，这个动画才会开始。

代码

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;

我的尝试

我正在考虑将row 的方向更改为row-reverse，但是这个属性不可设置动画，align-self 也是如此。

现在我不知道该怎么做。

考虑和访问的链接

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

styled component docs

guide about animation

css-tricks guide on animation

Answer 1

您可以使用 2 个关键帧和动画 transform: translateY(100%) 或 transform: translateY(-100%)(调整相关组件的百分比值)