reactで、Login画面を作成しています。
create account画面で、『 GO TO REGISTER』を押したら、
スクロール後、sign in画面が表示されるようにしたいです。
現在、create account画面で、『 GO TO REGISTER』を押したら、
スクロールしません。
検証ツールで確認しても、エラー表示がありません。
何方かアドバイスをお願いします。
login.js
1import React, { useState } from "react"; 2import "./LoginRegister.css"; 3 4function LoginRegister() { 5 const [addclass, setaddclass] = useState(""); 6 const [click, setClick] = useState(false); 7 const handleClick = () => { 8 setClick(!click); 9 }; 10 return ( 11 <div className={`container ${addclass}`} id="container"> 12 <div className="form-container sign-up-container"> 13 <form> 14 <h1>Create Account</h1> 15 <input type="text" placeholder="Name" /> 16 <input type="email" placeholder="Email" /> 17 <input type="password" placeholder="Password" /> 18 <button type="submit">REGISTER</button> 19 </form> 20 </div> 21 <div className="form-container sign-in-container"> 22 <form> 23 <h1>Login</h1> 24 <input type="email" placeholder="Email" /> 25 <input type="password" placeholder="Password" /> 26 <button type="submit">LOGIN</button> 27 </form> 28 </div> 29 <div className="overlay-container"> 30 <div className="overlay"> 31 <div className="overlay-panel overlay-left"> 32 <button 33 className="ghost" 34 id="signIn" 35 onClick={() => setClick(!click)} 36 > 37 GO TO LOGIN 38 </button> 39 </div> 40 <div className="overlay-panel overlay-right"> 41 <button 42 className="ghost" 43 id="signUp" 44 onClick={() => setClick(!click)} 45 > 46 GO TO REGISTER 47 </button> 48 </div> 49 </div> 50 </div> 51 </div> 52 ); 53} 54 55export default LoginRegister;
login.css
1* { 2 box-sizing: border-box; 3} 4 5body { 6 background-color: black; 7 display: flex; 8 justify-content: center; 9 align-items: center; 10 flex-direction: column; 11 height: 100vh; 12 margin: -20px 0 50px; 13} 14 15h1 { 16 font-weight: bold; 17 margin: 0; 18} 19 20button { 21 border-radius: 15px; 22 border: 2px solid white; 23 background-color: green; 24 color: #ffffff; 25 font-size: 14px; 26 font-weight: bold; 27 padding: 14px 45px; 28 letter-spacing: 1px; 29 text-transform: uppercase; 30 transition: transform 80ms ease-in; 31} 32 33button:active { 34 transform: scale(0.95); 35} 36 37button:focus { 38 outline-color: #ffffff; 39} 40 41button.ghost { 42 background-color: transparent; 43 border-color: #ffffff; 44} 45 46form { 47 background-color: #ffffff; 48 display: flex; 49 align-items: center; 50 justify-content: center; 51 flex-direction: column; 52 padding: 0 50px; 53 height: 100%; 54 text-align: center; 55} 56 57input { 58 background-color: #ffffff; 59 border: 2px solid #0a0; 60 padding: 12px 15px; 61 margin: 10px 0; 62 width: 100%; 63} 64 65.container { 66 background-color: #ffffff; 67 border-radius: 10px; 68 box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); 69 position: relative; 70 overflow: hidden; 71 width: 768px; 72 max-width: 100%; 73 min-height: 480px; 74} 75 76.form-container { 77 position: absolute; 78 top: 0; 79 height: 100%; 80 transition: all 0.6s ease-in-out; 81} 82 83.sign-in-container { 84 left: 0; 85 width: 50%; 86 z-index: 2; 87} 88 89.container.right-panel-active .sign-in-container { 90 transform: translateX(100%); 91} 92 93.sign-up-container { 94 left: 0; 95 width: 50%; 96 opacity: 1; 97 z-index: 5; 98} 99 100.container.right-panel-active .sign-up-container { 101 transform: translateX(100%); 102 opacity: 1; 103 z-index: 5; 104 animation: show 0.6s; 105} 106 107@keyframes show { 108 0%, 109 49.99% { 110 opacity: 0; 111 z-index: 1; 112 } 113 114 50%, 115 100% { 116 opacity: 1; 117 z-index: 5; 118 } 119} 120 121.overlay-container { 122 position: absolute; 123 top: 0; 124 left: 50%; 125 width: 50%; 126 height: 100%; 127 overflow: hidden; 128 transition: transform 0.6s ease-in-out; 129 z-index: 100; 130} 131 132.container.right-panel-active.overlay-container { 133 transform: translateX(-100%); 134} 135 136.overlay { 137 background: yellowgreen; 138 background-repeat: no-repeat; 139 background-size: cover; 140 background-position: 0 0; 141 color: #ffffff; 142 position: relative; 143 left: -100%; 144 height: 100%; 145 width: 200%; 146 transform: translateX(0); 147 transition: transform 0.6s ease-in-out; 148} 149 150.container.right-panel-active.overlay { 151 transform: translateX(50%); 152} 153 154.overlay-panel { 155 position: absolute; 156 display: flex; 157 align-items: center; 158 justify-content: center; 159 flex-direction: column; 160 padding: 0 40px; 161 text-align: center; 162 top: 0; 163 height: 100%; 164 width: 50%; 165 transform: translateX(0); 166 transition: transform 0.6s ease-in-out; 167} 168 169.overlay-left { 170 transform: translateX(-20%); 171} 172 173.container.right-panel-active.overlay-left { 174 transform: translateX(0); 175} 176 177.overlay-right { 178 right: 0; 179 transform: translateX(0); 180} 181 182.container.right-panel-active.overlay-right { 183 transform: translateX(-20%); 184}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。