Javascript 将CSS动画（转换）与onClick事件一起使用

我正在尝试制作一个简单的按钮

btnAdd

，它可以更改我的一个

新的

div类，使其可见，稍后我将添加一个取消按钮，使相同的div再次隐藏，但是我想用动画来实现这一点，所以我尝试使用

转换：高度1s

。但由于某种原因，我似乎无法让它工作。有人知道我哪里出错了吗

提前感谢,

马特

功能打开添加菜单（）{
document.getElementById（“新建”）.className=“打开”；
}

p{
保证金：0；
}
身体{
保证金：0；
背景色：#f6f4fb；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#666；
}
.btnAdd{
宽度：160px；
高度：30px；
浮动：对；
保证金：0px 30px 0px 0px；
背景色：#2f8fcb；
边框：2px实心#2f8fcb；
边界半径：3px；
颜色：#fff；
字体大小：粗体；
}
#新的{
宽度：50%；
身高：0；
利润率：30px45%10px5%；
过渡：高度1s；
溢出：隐藏；
}
#纽约公开赛{
高度：400px；
}

新增
姓名：

地址行1：

地址行2：

地址行3：

邮政编码：

联络电话：

您可以使用atribute可见性：

document.getElementById（“myP”）.style.visibility=“hidden”

可以在可见性隐藏的情况下启动div，并删除用于显示图元的可见性

---

它的工作原理很好：）

您必须使用

classList.add

在vanilla JS中添加一个类

功能打开添加菜单（）{
document.getElementById（“新建”）.classList.add（“打开”）；
}

p{
保证金：0；
}
身体{
保证金：0；
背景色：#f6f4fb；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#666；
}
.btnAdd{
宽度：160px；
高度：30px；
浮动：对；
保证金：0px 30px 0px 0px；
背景色：#2f8fcb；
边框：2px实心#2f8fcb；
边界半径：3px；
颜色：#fff；
字体大小：粗体；
}
#新的{
宽度：50%；
身高：0；
利润率：30px45%10px5%；
过渡：高度1s；
溢出：隐藏；
}
#纽约公开赛{
高度：400px；
}

新增
姓名：

地址行1：

地址行2：

地址行3：

邮政编码：

联络电话：

你做得对。唯一的问题是按钮被放置在表单元素中。单击该按钮后，将提交表单

---

要修复它，您可以用另一个标记替换按钮。或者在单击事件发生时避免提交。

将属性type='button'添加到按钮元素中。它应该适合你

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

添加新的

您到底想做什么，只是一个显示/隐藏切换？这不是正确的答案。它之所以有效，是因为你用一个div替换了表单标签。他可以从表单中删除这个按钮。这与我无关。啊，当然，我完全错过了。。。非常感谢。