動畫appendChild div高度javascript

Question

我已經編寫了這段代碼，在正確編寫電子郵件之前，它會顯示一條錯誤消息。 我想讓消息平滑顯示，並使用 javascript 或 css 或兩者平滑地上下推動它的元素（從 0 到默認高度的平滑高度），但我不知道如何。 不知道我自己解釋的好不好...

 const email = document.querySelector('#email'); eventListeners(); function eventListeners() { email.addEventListener('keyup', validateEmail); } function validateEmail() { const email = document.querySelector('.email'), inputEmail = document.querySelector('#email'), formatEmail = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/; if (inputEmail.value.match(formatEmail)) { email.removeChild(document.querySelector('.error')); } else { if (!document.querySelector('.error')) { const errorMessage = document.createElement('div'); errorMessage.setAttribute('class', 'error'); errorMessage.innerHTML = `<div class="showerror"><p>error</p></div>`; email.appendChild(errorMessage); } else if (inputEmail.value === "") { email.removeChild(document.querySelector('.error')); } } }

 .error { border: 1px solid black; width: 200px; text-align: center; }

 <div class="name"> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Name"> </div> <div class="email"> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Email"> </div> <div class="password"> <label for="password">Password:</label> <input type="password" id="password" name="password" placeholder="Password"> </div>

Answer 1

使用 CSS 過渡，如

    * {
-webkit-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
transition: all ease-in-out 0.5s;
}

此示例適用於所有元素。 如果您只需要一個，最好編寫 '*' 的特定選擇器。

您可以使用不同的延遲和動畫樣式來修改效果，在 w3schools 上閱讀更多內容： https : //www.w3schools.com/css/css3_transitions.asp

Answer 2

這是帶有建議修改的新代碼，但現在錯誤內容仍然存在。 我怎么能刪除它？

 const email = document.querySelector('#email'); eventListeners(); function eventListeners() { email.addEventListener('keyup', validateEmail); } function validateEmail() { const email = document.querySelector('.email'), error = document.querySelector('.error'), inputEmail = document.querySelector('#email'), formatEmail = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/; if (inputEmail.value.match(formatEmail)) { error.classList.remove("show-error") } else { if (inputEmail.value !== "") { error.innerHTML = `<p>error</p>`; error.classList.add("show-error") } else { error.classList.remove("show-error") } } }

 .error { width: 200px; max-height: 0; transition: max-height 1s ease-out; overflow: hidden; background: #d5d5d5; text-align: center; } .show-error { max-height: 100px; transition: max-height 1s ease-in; }

 <div class="name"> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Name"> </div> <div class="email"> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Email"> <div class="error"></div> </div> <div class="password"> <label for="password">Password:</label> <input type="password" id="password" name="password" placeholder="Password"> </div>