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()">