react：滑动切换注册登录

效果图

JS

import React, { useEffect, useState, useRef } from 'react'
import { message } from 'antd';
import styles from './style.less'
const contentStyleShow = {
    transform: 'translateX(80%)'
}
const contentStyleHide = {
    transform: 'translateX(0%)'
}
const index = () =>
{
    const [isShow, setIsShow] = useState(false)  // 控制登陆、注册
    const [showHide, SetShowHide] = useState(true)  // 控制登陆、注册显示隐藏
    const search = useRef()
    useEffect(() =>
    {
        document.title = '滑动切换注册登录页面'
        document.addEventListener('keyup', function (e)
        {
            if (e.code === 'KeyS')
            {
                search.current.focus();
            }
        })
        return () =>
        {

        }
    }, [])  // 检测数组内变量 如果为空 则监控全局
    const registerClick = () =>
    {
        setIsShow(false)
        SetShowHide(true)
    }
    const LoginClick = () =>
    {
        setIsShow(true)
        SetShowHide(false)
    }
    const Processing = (e) =>
    {
        // 阻止默认事件
        e.preventDefault();
        let formData = new FormData(document.getElementById('form'));
        // 自定义接口所需参数
        formData.append('address', '鹿邑');
        formData.append('type', '常规');
        formData.append('endTime', '2022年1月6日')
        formData.append('activiTime', '2022年1月6日')
        let options = {
            method: 'post',
            body: formData
        }
        fetch('http://114.255.136.222:7000/red-market/activity/activity_upload', options).then((response) => response.json())
            .then((responseJson) =>
            {
                responseJson.code === 0 ? message.success({
                    content: '上传成功',
                    style: {
                        marginTop: '12vh',
                        color: '#73d13d'
                    },
                }) : message.error({
                    content: '上传失败',
                    style: {
                        marginTop: '12vh',
                        color: '#d9363e'
                    },
                })
            }, error =>
            {
                console.warn(error);
            })
    }
    return (
        <div className={styles.container}>
            <form action='http://114.255.136.222:7000/red-market/activity/activity_upload?' id='form' style={isShow ? contentStyleShow : contentStyleHide} className={styles.form} onSubmit={Processing}>
                {/* 注册 */}
                <div style={showHide ? { display: 'none' } : null} className={styles.register} >
                    <h1>注册</h1>
                    <input type="text" placeholder='用户名' />
                    <input type="email" placeholder='邮箱' />
                    <input type="password" placeholder='密码' />
                    <input type="startTime" placeholder='密码' />
                    <button >注册</button>
                </div>
                {/* 登陆 */}
                <div style={!showHide ? { display: 'none' } : null} className={styles.login} >
                    <h1>登陆</h1>
                    <input name='name' type="text" placeholder='用户名' ref={search} />
                    <input name='password' type="password" placeholder='密码' />
                    <input name='startTime' type="text" placeholder='日期' ref={search} />
                    <input name='image' type="file" />
                    <button type='submit'>登陆</button>
                </div>
            </form>
            <div className={`${styles.con} ${styles.left}`}>
                <h2>欢迎来到<span>羽神小窝</span></h2>
                <p>快来领取你的专属宠物</p>
                <div className={styles.conImg}>
                    <img src="https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a5596fd73380b818dc300" alt="" />
                </div>
                <p>已有账号</p>
                <button onClick={registerClick}>去登录</button>
            </div>
            <div className={`${styles.con} ${styles.right}`}>
                <h2>欢迎来到<span>羽神小窝</span></h2>
                <p>快来领取你的专属宠物</p>
                <img src="https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a5596fd73380b818dc300" alt="" />
                <p>没有账号?</p>
                <button onClick={LoginClick}>去注册</button>
            </div>
        </div >
    )
}

export default index

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(200deg, #f3e7e9, #f3e7e9, #3eeeff);
}

.container {
  position: relative;
  background-color: #fff;
  width: 650px;
  height: 415px;
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, .1);

}

// 表单
.form {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -10%;
  left: 5%;
  background-color: #d3b7d8;
  width: 320px;
  height: 500px;
  border-radius: 5px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, .1);
  //   动画过度 加速后减速
  transition: .5s ease-in-out;
  z-index: 2;

  button {
    width: 70%;
    margin-top: 35px;
    background-color: #f6f6f6;
    outline: none;
    border-radius: 8px;
    padding: 13px;
    color: #a262ad;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;

    &:hover {
      background-color: #a262ad;
      color: #f6f6f6;
      transition: background-color .5s ease;
    }
  }
}

// 登陆注册
.register,
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  h1 {
    text-align: center;
    margin-bottom: 25px;
    //   大写
    text-transform: uppercase;
    //   字间距
    letter-spacing: 5px;
    color: #fff;
  }

  input {
    background-color: transparent;
    width: 70%;
    color: #fff;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    padding: 10px 0;
    text-indent: 10px;
    margin: 8px 0;
    font-size: 14px;
    letter-spacing: 2px;
  }

  // 文字颜色
  input::placeholder {
    color: #fff;

  }

  // 焦点
  input:focus {
    color: #a262ad;
    outline: none;
    border-bottom: 1px solid #a262ab80;
  }

  input :focus::placeholder {
    opacity: 0;
  }
   //   更改chrome里Input历史记录样式
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent;
    background-image: none;
    transition: background-color 50000s ease-in-out 0s;
  }
}




.left {
  left: -2%;
}

.right {
  right: -2%;
}

.con {
  // 弹性布局 垂直排列 居中
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  width: 50%;
  transform: translateY(-50%);

  img {
    width: 150px;
    height: 150px;
  }

  h2 {
    color: #8e9aaf;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 4px;
  }

  p {
    font-size: 12px;
    letter-spacing: 2px;
    color: #8e9aaf;
    text-align: center;
  }

  span {
    color: #d3b7d8;
  }

  img {
    width: 150px;
    height: 150px;
    opacity: .9;
    margin: 40px 0;
  }

  button {
    margin-top: 3%;
    background-color: #fff;
    color: #a262ad;
    border: 1px solid #d3b7d8;
    padding: 6px 10px;
    border-radius: 5px;
    letter-spacing: 1px;
    outline: none;
    cursor: pointer;

    &:hover {
      background-color: #d3b7d8;
      color: #fff;
    }
  }
}