Javascript 在隐藏和显示元素时添加微妙的动画-CSS-JS

我正在添加一个隐藏类，并在项目中单击按钮时删除一个隐藏类。很简单。但是，有没有一种方法可以让它们快速地展开和汇总，而不是简单地隐藏元素并显示它们？我还不是一个优秀的前端人员，以下是我的Javascript：

JS

---

哪些是学习动画的好资源？

CSS解决方案：

$（文档）。在（“单击”，“跨距”，函数（事件）{
$（“.slider”）.toggleClass（“隐藏”）；
event.preventDefault（）；
});
滑块{
高度：200px；
最大高度：500px；
背景色：红色；
过渡性质：全部；
过渡时间：.5s；
过渡计时功能：三次贝塞尔（0,1,0.5,1）；
}
.隐藏{
溢出y：隐藏；
最大高度：0；
}

内容
单击我
你指的是你的jQuery。这不是Javascript。无论如何，你想要的是类似手风琴的东西，这些天实际上可以静态实现。一个关于.的例子，jQuery不也是JS吗？也谢谢你的帮助！jQuery是一个基于javascript构建的库，但它不是javascript，因为slideUp（）或slideToggle（）等东西（jQuery中的自定义扩展）不是javascript的基础。要了解jQuery效果，请看一看，但另一个要考虑的选项是CSS动画，比如Snowmonkey，它是JavaScript库，而不是本机JS。我坚持这种强调，因为我是许多纯粹主义者中的一员，他们认为将
$
映射到
文档。querySelectorAll
（）是当今整个臃肿库的一个很好的替代品。作为固定高度的注意事项，如果在
最大高度上设置动画，并且在顶部和底部设置动画
填充
，您可以欺骗用户的眼睛，使其平滑地设置动画，并避免完全固定的高度。
$(document).on("click", _this.sel.close, function(event) {
  $(".update-billing").addClass("hidden");
  $(".billing-stats").removeClass("hidden");
  $(".current-cc").removeClass("hidden");
  event.preventDefault();
});