Реагировать на стиль-компонент, анимация: инвертировать положение двух делителей - PullRequest
Новая
       22

Реагировать на стиль-компонент, анимация: инвертировать положение двух делителей

0 голосов
/ 03 июля 2019

Я пытался увидеть много материалов об этом, но не нашел ответа, который действительно мог бы помочь мне понять, как решить эту проблему. В конце поста вы найдете документацию и ссылки, которые я видел.

Задача

У меня есть эта форма, и моя цель состоит в том, чтобы создать анимацию, которая инвертирует положение двух столбцов: так, чтобы правый столбец перешел в правую часть, белый столбец - в левую. Эта анимация запустится только когда я нажму кнопку Sign up.

enter image description here

Код 

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.

Теперь я не могу понять, как это сделать.

Рассмотрение и посещенные ссылки

Я организовал вход в систему в двух разных представлениях, один для регистрации и один для входа в систему, может быть, я могу анимировать между маршрутизацией двух компонентов?

документация по компонентам в стиле

руководство по анимации

руководство по анимации css-трюков

1 Ответ

1 голос
/ 03 июля 2019

вы можете использовать 2 keyframes и анимировать transform: translateY(100%) или transform: translateY(-100%) (отрегулируйте значения в процентах) для соответствующих компонентов

...