У меня есть экран входа в React с черным фоном, установленный с помощью стиля CSS. Экран входа в систему является довольно элементарным на данный момент, который состоит из 3 входных тегов username, password и submit соответственно.
Все, что я сейчас пытаюсь сделать, это изменить фон экрана входа с эффектом скольжения (высота От 0 до высоты $ loginScreenHeight) всякий раз, когда мышь двигается.
Я получил ее, как ожидалось, но с небольшим побочным эффектом. Побочным эффектом является то, что всякий раз, когда мышь перемещается, исходный фон на мгновение исчезает, а новый фон начинает скользить вниз.
Я хочу, чтобы новый фон начал скользить поверх старого фона и скрыть его. Может ли какой-нибудь эксперт Css подсказать, что мне здесь не хватает?
Ниже приведен мой код.
import React from "react";
import axios from "axios";
import { connect } from "react-redux";
import { userlogin } from "./../action/userLogin";
class Login extends React.Component {
state = {
email: "",
passwd: "",
loginStatus: "",
mouseOverLogin: false
};
enteruname = e => this.setState({ email: e.target.value });
enterpasswd = e => this.setState({ passwd: e.target.value });
submitCredentials = e => e.preventDefault();
render() {
return (
<div
className="login"
onMouseMove={() => this.setState({ mouseOverLogin: true })}
>
<form
onSubmit={this.submitCredentials}
className={
this.state.mouseOverLogin ? "loginForm animateLogin" : "loginForm"
}
>
<p>Login</p>
<hr />
<input
className="uname"
placeholder="Enter Username"
type="email"
name="email"
value={this.state.email}
onChange={this.enteruname}
/>
<input
className="passwd"
placeholder="Enter Password"
type="password"
name="passwd"
value={this.state.passwd}
onChange={this.enterpasswd}
/>
<button className="loginBtn">Login</button>
</form>
</div>
);
}
}
export default connect()(Login);
CSS Файл: -
.login {
width: 100vw;
height: 100vh;
overflow: hidden;
position: absolute;
top: 0vh;
left: 0vw;
}
.loginForm {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
top: 25vh;
left: 38vw;
width: 27vw;
height: 54vh;
background: rgba(0, 0, 0, 0.7);
position: relative;
z-index: 1000;
border-radius: 20px;
}
.login form input {
margin: 0 auto;
width: 24vw;
height: 6vh;
border-radius: 20px;
outline: none;
background: rgba(42, 27, 61, 0.6);
color: white;
text-align: center;
font-size: 1.2rem;
}
.uname {
position: absolute;
top: 18vh;
}
.uname:focus,
.passwd:focus {
background: rgba(42, 27, 61, 0.6);
}
.passwd {
position: absolute;
top: 28vh;
}
.loginBtn {
position: absolute;
width: 50%;
height: 5vh;
left: 25%;
text-decoration: none;
outline: none;
top: 38vh;
border-radius: 20px;
background: rgba(42, 27, 61, 0.6);
color: white;
}
.login form input::placeholder {
color: white;
text-align: center;
font-size: 1.2rem;
}
.login form p {
color: white;
font-size: 25px;
width: 24vw;
position: absolute;
top: 5vh;
left: 2vw;
}
.animateLogin {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 25vh;
left: 38vw;
width: 27vw;
animation: slideDown 2s 1 forwards ease-in-out;
z-index: 0;
// transition: all 280ms ease-in-out;
}
@keyframes slideDown {
from {
height: 0;
background: rgba(0, 0, 0, 0.7);
}
to {
background: $navlink;
height: 54vh;
}
}
hr {
position: absolute;
top: 12vh;
width: 24vw;
height: 1px;
background: white;
}