Question

我试图看到很多有关它的资料，但是我没有找到真正可以帮助我弄清楚如何解决此问题的答案。在文章末尾，您将找到我所看到的文档和链接。

问题

我有这个表格，我的目标是制作一个动画来反转两列的位置：因此右列将在右侧，白列在左侧。仅当我单击按钮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相同。

现在我不知道该怎么做。

访问和访问链接

我以两种不同的视图组织了登录名，一个用于signUp，一个用于SignIn，也许我可以在路由两个组件之间建立动画吗？

styled component docs

guide about animation

css-tricks guide on animation

Answer 1

您可以使用2个keyframes并为相应的分量设置transform: translateY(100%)或transform: translateY(-100%)的动画（调整百分比值）

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

1 个答案: