Фоновая анимация слайдов во время onMouseMove не работает должным образом - PullRequest
1 голос
/ 06 февраля 2020

У меня есть экран входа в 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;
}

1 Ответ

1 голос
/ 06 февраля 2020

изменение height на 0 является проблемой, потому что «старый фон» установлен для элемента с 0 height.

Я написал 2 PO C, который может помочь вам:

.a,
.b {
  margin: 10px;
  padding: 10px;
  height: 30px;
  text-align: center;
  border: solid 1px blue;
  background: green;
  position: relative;
}

.a:hover {
  animation: slidebg 2s;
  box-shadow: inset 0 50px 0 0 blue;
}

@keyframes slidebg {
  0% {
    box-shadow: inset 0 0 0 0 blue;
  }
  100% {
    box-shadow: inset 0 50px 0 0 blue;
  }
}

.b-bg {
  position: absolute;
  height: 0;
  top: 0;
  left: 0;
  background: blue;
  width: 100%;
}

.b span {
  position: relative;
  z-index: 10;
}

.b:hover .b-bg {
  animation: slidebg2 2s;
  height: 100%;
}

@keyframes slidebg2 {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
<div class="a">link</div>

<div class="b">
  <div class="b-bg"></div>
  <span>link</span>
</div>
...