react：滑动切换注册登录

效果图

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;}}
}

react：滑动切换注册登录相关推荐

react滑动切换tab动画效果_Swiper - 免费开源、功能强大的触摸滑动js特效插件
简单配置就能实现手机.PC 网页中滑动.焦点轮播图.tab 切换和触摸导航等大部分功能. js 滑动特效插件 Swiper 是一款纯 javascript 打造的滑动特效插件,主要用对移动端 web ...
react滑动切换tab动画效果_[React Native]react-native-scrollable-tab-view(入门篇)
官方为我们提供的Tab控制器有两种: TabBarIOS,仅适用于IOS平台 ViewPagerAndroid,仅适用于Android平台(严格来讲并不算,因为我们还需要自己实现Tab) 如果我们需要 ...
react滑动切换tab动画效果_后端设计中，如何用axure实现table切换动效？
前段时间做了一个微信小程序的寄卖项目,前端页面这里不过多总结,今天先来说说后端里涉及到的内容.在做项目评审时候,不想局限于静态页面,所以会加些点击效果让产品demo看起来更加有实操性,先看一下Tabl ...
react滑动切换tab动画效果_使用React实现的水平标签（Tab）栏
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var data = [ {name: 'Red', value: 'red'}, {name: 'Blue ...
pyqt5多界面切换，关联数据库校验，注册登录修改密码操作练习
pyqt5多界面切换,关联数据库校验,注册登录修改密码操作练习import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QWi ...
HTML注册登录页面模板，左右切换，用户注册、用户登录两种功能。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
使用第三方打码平台图鉴识别滑动验证码模拟登录
文章目录一.图鉴的账户注册识别流程二.欧模网案例滑动验证码模拟登录页面分析三.代码分析四.欧模网案例展示总结一.图鉴的账户注册图鉴网页地址: http://www.ttshitu.c ...
Android自定义顶部栏及侧滑菜单和fragment+viewpag滑动切换的实现
嘿嘿嘿,关于android滑动的操作,是不是经常都会用到呢. 我肯定也要学习一下啦. https://blog.csdn.net/u013184970/article/details/82882107 ...
Jsp+Servlet+MYSQL注册登录案例(界面难看，ε=(´ο｀*)))唉)
注册登录界面尤为常见,我的界面尤为难看,勉为其难的写吧,前端不熟就是这样... 这个案例运用到了: 1.Jsp动态页面--->动态页面 2.Servlet逻辑判断后台---->实现界面与数 ...
ios 顶部tab滑动实现_iOS开发之多表视图滑动切换示例（仿头条客户端）
好长时间没为大家带来iOS开发干货的东西了,今天给大家分享一个头条新闻客户端各个类别进行切换的一个示例.在Demo中对所需的组件进行的简单封装,在封装的组件中使用的是纯代码的形式,如果想要在项目中进行 ...

react：滑动切换注册登录

效果图

react：滑动切换注册登录相关推荐

最新文章

热门文章