onMouseMove 期间的背景幻灯片动画未按预期工作

Question

我有一个使用 CSS 样式设置的黑色背景的 React 登录屏幕。此时的登录屏幕非常初级，分别由 3 个输入标签用户名、密码和提交组成。

我现在要做的就是在鼠标移动时使用向下滑动效果（高度 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;
}

Answer 1

height 更改为 0 是一个问题，因为“旧背景”设置在 0 height 的元素上。

我写了2个可以帮助你的POC：

.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>