Animate Javascript classList.toggle

Question

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

他们使用JavaScript函数classList.toggle显示了Navbar的移动版本。有什么方法可以使此动画并添加过渡？

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

Answer 1

您不能使类属性动画，但是可以动画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代码。

当然，我的示例是基本的，只会为背景色添加过渡，但它应该为您解决问题：）