最近开始学习CSS和HTML，发现this响应式导航栏教程。
他们用 javascript 函数 classList.toggle 显示了导航栏的移动版本。有什么方法可以对此进行动画处理并添加过渡吗？
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");}
最佳答案
您不能为类属性设置动画，但可以为 CSS 属性设置动画。
您的 .topnav 类应该有一个初始 CSS 定义，如下所示:
.topnav {
background-color: black; /* Set an initial background */
transition: background-color 200ms; /* Tell browser to use a transition when background-color changed */
}
感谢这段代码，只要您的 .topnav 元素的背景色发生变化，就会发生转换。
例如，您可以添加此 CSS:
.topnav.responsive {
background-color: blue;
}
这将适用于您的 JS 代码。
当然，我的示例是基本的，只会为背景颜色添加一个过渡，但它应该可以帮助您解决您的问题:)
关于javascript - 动画 Javascript classList.toggle，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37868772/