我试图让我的输入标签在单击后向上移动,其工作方式是在单击输入后将包含我想要的动画的类分配给标签,但它不起作用。
let $ = document
let usernameInputLabel = $.querySelector(".username-input-label")
let usernameInput = $.querySelector(".username-input")
let isFocused = false
function focusAnimation() {
if (isFocused) {
usernameInputLabel.classList.remove(".username-focus-label-animation")
usernameInputLabel.classList.add(".username-blur-label-animation")
isFocused = false
} else {
usernameInputLabel.classList.add(".username-focus-label-animation")
usernameInputLabel.classList.remove(".username-blur-label-animation")
isFocused = true
}
}
usernameInput.addEventListener("click", focusAnimation)
* {
margin: 0;
padding: 0;
font-family: urbanist;
}
body {
height: 100vh;
background-color: #496d8d;
display: flex;
justify-content: center;
align-items: center;
}
form {
width: 130%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
}
input {
border: none;
border-bottom: 1px solid #082c4c;
width: 100%;
background-color: #224f3900;
padding: 0.2rem 0 0.2rem 0;
z-index: 99999;
position: relative;
color: #ddd;
font-size: 1.5rem;
font-weight: 100;
}
input:focus {
outline: none;
}
.group {
width: 60%;
}
label {
display: inline-block;
transform: translate(0, 2.1rem);
user-select: none;
color: #ddd;
}
.username-focus-label-animation {
animation: usenramefocusLabelAnimation 700ms forwards;
}
@keyframes usenramefocusLabelAnimation {
from {
transform: translate(0, 2.1rem);
}
to {
transform: translate(0, 0.1rem);
}
}
.username-blur-label-animation {
animation: usenrameBlurLabelAnimation 700ms forwards;
}
@keyframes usenrameBlurLabelAnimation {
from {
transform: translate(0, 0.1rem);
}
to {
transform: translate(0, 2.1rem);
}
}
button:not(.show-password) {
background-color: #082c4c;
scale: 1.8;
padding: 0.3rem;
border: none;
border-radius: 10%;
cursor: pointer;
color: #ddd;
box-shadow: 0 5px 5px 2px #082c4c70, 0 2px 10px -1px #0f497b inset;
transition: 500ms;
}
button:not(.show-password):hover {
box-shadow: 0 0px 0px 0px #082c4c70, 0 2px 10px -1px #0f497b inset;
background-color: #07345b;
}
.heading {
font-size: 4rem;
color: #ddd;
font-weight: 200;
text-align: center;
text-shadow: 0 5px 10px #082c4c90, 0 15px 10px #082c4c90, 0 25px 10px #082c4c90;
}
.login-container {
width: 30%;
height: 90vh;
padding: 0.5rem;
backdrop-filter: blur(20px);
background-color: #1d5582;
border-radius: 10%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 3rem;
box-shadow: 0 10px 50px 1px #082c4c inset
}
<div class="login-container">
<p class="heading">sign in to your account</p>
<form>
<div class="username-group group">
<label class="username-input-label " for="username-input">User name</label>
<input class="username-input" type="text">
</div>
<div class="password-group group">
<label class="password-input-label" for="password-input">password</label>
<input class="password-input" type="text">
<!-- <button class="show-password">show password</button> -->
</div>
<div class="confirm-password-group group">
<label class="confirm-password-input-label" for="confirm-password-input">confirm password</label>
<input class="confirm-password-input"></input>
</div>
<div class="email-group group">
<label class="email-input-label" for="email-input">email adress</label>
<input class="email-input"></input>
</div>
</form>
<button class="sign-up">sign up</button>
</div>
动画编写正确,功能似乎运行良好。我看不出问题出在哪里
您可以尝试使用纯 HTML 和 CSS 来为输入标签设置动画:
/*QuickReset*/ * {margin: 0; box-sizing: border-box; }
.login-container {
max-width: 20rem;
h2 {
padding: 1rem 0;
}
& form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
& label {
position: relative;
& span {
position: absolute;
left: 0.5rem;
top: 0.5rem;
transform-origin: left;
transition: 0.3s;
}
}
& input {
border: none;
border-bottom: 1px solid #082c4c;
padding: 0.5rem;
width: 100%;
&:not(:placeholder-shown),
&:focus {
&~span {
translate: 0px -1.3rem;
scale: 0.8;
}
}
&:focus {
outline: none;
border-bottom-color: #0bf;
}
&:invalid {
border-bottom-color: #f00;
}
}
& button {
padding: 1rem 0.5rem;
}
}
<div class="login-container">
<h2>Sign in to your account</h2>
<form action="/api/signin">
<label><input type="text" name="username" placeholder=""><span>Username</span></label>
<label><input type="password" name="password1" placeholder=""><span>Password</span></label>
<label><input type="password" name="password2" placeholder=""><span>Confirm password</span></label>
<label><input type="email" name="email" placeholder=""><span>Email</span></label>
<button>Sign in</button>
</form>
</div>