Javascript 在不使用jQuery的情况下将div滑入外观

我在链接上使用

onclick

方法来显示div。但是，它不会滑动，只是简单地显示出来。如何在不使用jQuery的情况下使其具有幻灯片效果。我不想使用jQuery的原因是我希望页面加载速度尽可能快

函数视图（）{
document.getElementById（'topmenu'）.setAttribute（'style'，'display:block'）；
}

#顶栏{
背景颜色：黄色；
溢出：自动；
}
#顶部菜单{
显示：无；
}

这里有一些文字

可以使用Javascript完成 setInterval（）和clearInterval（）函数。 请参见此处的代码示例

---

可以使用Javascript完成 setInterval（）和clearInterval（）函数。 请参见此处的代码示例

您不能将转换应用于

显示

属性-您可以转换

缩放

-请参见下面的演示：

函数视图（）{
//添加一个类来显示元素
document.getElementById（'topmenu'）.classList.add（'show'）；
}

#顶栏{
背景颜色：黄色；
溢出：自动；
}
#顶部菜单{
变换：缩放（0）；/*垂直缩放为零*/
变换原点：顶部；/*将原点设置为顶部*/
溢出：隐藏；
变换：变换1s；/*仅对缩放应用变换*/
}
#topmenu.show{
变换：缩放（1）；/*缩放到全高*/
}

这里有一些文字

您不能将转换应用于

显示

属性-您可以转换

缩放

-请参见下面的演示：

函数视图（）{
//添加一个类来显示元素
document.getElementById（'topmenu'）.classList.add（'show'）；
}

#顶栏{
背景颜色：黄色；
溢出：自动；
}
#顶部菜单{
变换：缩放（0）；/*垂直缩放为零*/
变换原点：顶部；/*将原点设置为顶部*/
溢出：隐藏；
变换：变换1s；/*仅对缩放应用变换*/
}
#topmenu.show{
变换：缩放（1）；/*缩放到全高*/
}

这里有一些文字

就像mdn大师那样做：就像mdn大师那样做：