Animation 过渡在第一次单击时未运行

Question

我正在为带有 JS 和 CSS 的表单做一个 animation

 var userInput = document.getElementById("login-user"); var userLabel = document.getElementById("user-label"); // User Label Functions function activeUser() { userLabel.style.transition = "0.2s"; userLabel.style.top = "-1.5vw"; } function deactiveUser() { if (userInput.value.length == 0) { userLabel.style.top = "0vw"; } }

 #login-user { margin-bottom: 3vw; width: 80%; height: 3vw; border-radius: 0.5vw; border: solid #0057e0 0.1vw; background: none; color: #ddd; text-indent: 0.5vw; font-size: 1.5vw; } #user-label { color: black; font-size: 2vw; position: relative; left: 8vw; background: #fff; margin-right: -2vw; font-family: 'Open Sans'; cursor: text; transition: 0.2s; }

 <label for="login-user" onclick="activeUser()" id="user-label">Username</label> <input type="text" name="user" id="login-user" onfocusout="deactiveUser()" onclick="activeUser()" onfocus="activeUser()">

如您所见，当我们第一次运行上面的代码片段时，“用户名”文本会立即出现在上面，没有过渡，但是当我们执行onfocusout时，它会顺利返回。 我想在代码执行时将 go 平滑地放到输入的顶部，但我不明白为什么没有。

Answer 1

那是因为#user-label必须在一开始就定义在top 。 刚刚添加top: 0; 到你的代码，它工作正常。

 var userInput = document.getElementById("login-user"); var userLabel = document.getElementById("user-label"); // User Label Functions function activeUser() { userLabel.style.transition = "0.2s"; userLabel.style.top = "-1.5vw"; } function deactiveUser() { if (userInput.value.length == 0) { userLabel.style.top = "0vw"; } }

 #login-user { margin-bottom: 3vw; width: 80%; height: 3vw; border-radius: 0.5vw; border: solid #0057e0 0.1vw; background: none; color: #ddd; text-indent: 0.5vw; font-size: 1.5vw; } #user-label { color: black; font-size: 2vw; position: relative; left: 8vw; background: #fff; margin-right: -2vw; font-family: 'Open Sans'; cursor: text; transition: 0.2s; top: 0; }

 <label for="login-user" onclick="activeUser()" id="user-label">Username</label> <input type="text" name="user" id="login-user" onfocusout="deactiveUser()" onclick="activeUser()" onfocus="activeUser()">