使用javascript添加和删除类时，Css转换属性不起作用

当我们使用jquery转换添加和删除类时，效果很好，但当我尝试使用JavaScript执行相同的工作时，效果不好

请帮我弄清楚为什么会这样

这是我的HTML代码

<button id="contact" onclick="showContactUs()">Contact us Form</button>

<div id="contact-us">
    <p id="hide" onclick="hideContactUs()">fdfg</p>
</div>

我的css代码

#contact-us{
  height: 400px;
  width: 400px;
  background-color: rgb(55, 151, 119);
  transition: all 1s linear;
}

.contact-us-hidden{
  display: none;
}

---

使用简单函数，而不是使用箭头函数

const buttonName=document.getElementById（'contact-us'）；
函数showContactUs（）{
buttonName.classList.remove（'contact-us hidden'）；
}
函数hideContactUs（）{
buttonName.classList.add（'contactus hidden'）；
}

#联系我们{
高度：400px；
宽度：400px；
背景色：rgb（55151119）；
过渡：所有1s线性；
}
.联系我们{
显示：无；
}

联系我们表格
fdfg

我不知道您使用的是什么动画，但您可以这样做：

const buttonName=document.getElementById（'contact-us'）；
函数showContactUs（）{
buttonName.classList.remove（'contact-us-hidden'）；
}
函数hideContactUs（）{
buttonName.classList.add（'contact-us-hidden'）；
}

#联系我们>部门{
高度：400px；
宽度：400px；
背景色：rgb（55151119）；
}
#联系我们，
.联系我们{
过渡：不透明度1s线性；
}
.联系我们{
不透明度：0；
溢出：隐藏；
}
/*以延迟方式隐藏屏幕*/
#contact-us.contact-us-hidden>div{
利润上限：-10000px；
过渡：边距顶部0.8秒；
}

联系我们表格
fdfg

废话

无法转换显示属性。您可以添加一个代码片段来说明如何在JQuery中使用它吗？

#contact-us{
  height: 400px;
  width: 400px;
  background-color: rgb(55, 151, 119);
  transition: all 1s linear;
}

.contact-us-hidden{
  display: none;
}