【发布时间】：2017-11-21 22:32:36
【问题描述】：
我正在尝试创建一个带有一些动画的表单。标签文本的位置和大小在动画期间更改。 但在动画期间，输入字段的底部边框也会向上移动一点。如何解决这个问题？
当字体大小没有被控制时，动画效果很好。 单击输入字段以触发动画。 代码sn-p如下：
$(document).ready(function(){
$('#user').on("click",function(){
$('#userLabel').addClass("label-animation");
});
$('#pass').on("click",function(){
$('#passLabel').addClass("label-animation");
});
});body {
background-color: #312323;
}
.card-style {
margin: auto;
margin-top: 10rem;
width: 35rem;
box-shadow: 0px 0px 35px 7px #170a09;
background: -moz-linear-gradient(45deg, rgba(160, 121, 201, 1) 0%, rgba(227, 168, 132, 1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(160, 121, 201, 1)), color-stop(100%, rgba(227, 168, 132, 1)));
color: white;
}
#user,
#pass,
#subBtn {
border-radius: 0px;
border: 2px solid transparent;
transition: all 0.5s;
}
#user,
#pass {
border-bottom: 2px solid white;
background-color: transparent;
}
#userLabel,
#passLabel {
transform: translate(0px, 45px);
font-size: 1.25rem;
}
#subBtn:hover {
cursor: pointer;
border: 2px solid white;
color: white;
transition: all 0.3s;
background: transparent;
}
#user:focus,
#pass:focus {
box-shadow: none;
border: 2px solid transparent;
border-bottom: 2px solid #6827b0;
}
#subBtn {
background-color: #fddb7a;
font-weight: 600;
}
.label-animation {
animation-name: labelAnimate;
animation-delay: 0.2s;
animation-duration: 1s;
}
@keyframes labelAnimate {
from {
transform: translate(0px, 45px);
font-size: 1.25rem;
}
to {
transform: translate(0px, 10px);
font-size: 16px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<title>Form#1</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" >
</head>
<body>
<div class="card card-style">
<div class=card-body>
<h3 class="card-title text-center text-normal">Sign In</h3>
<form>
<div class="form-group" style="height:100px">
<label id="userLabel">Username </label>
<input type="text" class="form-control form-control-lg" id="user">
</div>
<div class="form-group" style="height:100px">
<label id="passLabel">Password </label>
<input type="password" class="form-control form-control-lg" id="pass">
</div>
<a href=# style="color:white"><small class="form-text">Forget password?</small></a><br>
<button type="submit" class="btn btn-default btn-block" id="subBtn">Submit</button>
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>【问题讨论】：
-
给这个问题起一个吸引合适人的标题。 （现在能解决的和以后能用解决问题的）
-
我在 sn-p 动画中看不到更改标签的位置和大小。您是否忘记发布您的一些代码？
-
不，我没有，可能是因为动画在你向下滚动之前就结束了