Question

我最近开始学习CSS和HTML，并找到了响应式导航栏的this教程。

他们使用javascript函数classList.toggle显示导航栏的移动版本。有没有办法为此设置动画并添加过渡？

function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");}

Answer 1

您无法为class属性设置动画，但可以为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 classList.toggle

1 个答案: