在onClick事件中使用CSS动画（过渡）

Question

我正在尝试制作一个简单的按钮btnAdd ，它会更改我的new div类之一，以便使其可见；稍后，我将添加一个cancel按钮，使该div再次隐藏，但是我想这样做使用动画，所以我尝试使用transition: height 1s 。 但是由于某种原因，我似乎无法使其工作。 有人知道我在哪里错吗？

提前致谢，

马特。

 function open_Add_Menu() { document.getElementById("new").className = "open"; } 

 p { margin: 0; } body { margin: 0; background-color: #f6f4fb; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #666; } .btnAdd { width: 160px; height: 30px; float: right; margin: 0px 30px 0px 0px; background-color: #2f8fcb; border: 2px solid #2f8fcb; border-radius: 3px; color: #fff; font-weight: bold; } #new { width: 50%; height: 0; margin: 30px 45% 10px 5%; transition: height 1s; overflow: hidden; } #new.open { height: 400px; } 

 <form> <div id="btnAdd"> <button class="btnAdd" onclick="open_Add_Menu()">Add New</button> </div> <div id="new"> <div id="new_name"> <p>Name:</p> <input type="text" id="name_tb" autocomplete="off"> </div> <div id="new_add1"> <p>Address Line 1:</p> <input type="text" id="add1_tb" autocomplete="off"> </div> <div id="new_add2"> <p>Address Line 2:</p> <input type="text" id="add2_tb" autocomplete="off"> </div> <div id="new_add3"> <p>Address Line 3:</p> <input type="text" id="add3_tb" autocomplete="off"> </div> <div id="new_post"> <p>Postcode:</p> <input type="text" id="post_tb" autocomplete="off"> </div> <div id="new_number"> <p>Contact Number:</p> <input type="text" id="number_tb" autocomplete="off"> </div> </div> </form> 

Answer 1

您必须使用classList.add在香草JS中添加一个类。

 function open_Add_Menu() { document.getElementById("new").classList.add('open'); } 

 p { margin: 0; } body { margin: 0; background-color: #f6f4fb; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #666; } .btnAdd { width: 160px; height: 30px; float: right; margin: 0px 30px 0px 0px; background-color: #2f8fcb; border: 2px solid #2f8fcb; border-radius: 3px; color: #fff; font-weight: bold; } #new { width: 50%; height: 0; margin: 30px 45% 10px 5%; transition: height 1s; overflow: hidden; } #new.open { height: 400px; } 

 <div> <div id="btnAdd"> <button class="btnAdd" onclick="open_Add_Menu()">Add New</button> </div> <div id="new"> <div id="new_name"> <p>Name:</p> <input type="text" id="name_tb" autocomplete="off"> </div> <div id="new_add1"> <p>Address Line 1:</p> <input type="text" id="add1_tb" autocomplete="off"> </div> <div id="new_add2"> <p>Address Line 2:</p> <input type="text" id="add2_tb" autocomplete="off"> </div> <div id="new_add3"> <p>Address Line 3:</p> <input type="text" id="add3_tb" autocomplete="off"> </div> <div id="new_post"> <p>Postcode:</p> <input type="text" id="post_tb" autocomplete="off"> </div> <div id="new_number"> <p>Contact Number:</p> <input type="text" id="number_tb" autocomplete="off"> </div> </div> </div> 

Answer 2

您做对了事。 唯一的问题是您的按钮位于表单元素内。 单击该按钮后，将提交表单。

要解决此问题，您可以将按钮替换为另一个标签。 或避免在点击事件发生时提交。

Answer 3

将属性type ='button'添加到您的button元素中。 它应该为您工作。

<button type="button" class="btnAdd" onclick="open_Add_Menu()">Add New</button>

Answer 4

您可以使用属性可见性：

document.getElementById（“ myP”）。style.visibility =“隐藏”;

您可以在隐藏可见性的情况下启动div并删除用于显示该元素的div。

它的工作正常:)