如何在javascript中为推式菜单添加过渡效果？

如何向推式菜单添加过渡效果？我尝试使用document.getElementById（'content'）.style.transition=“left 1.5s”；但它不起作用。我希望能得到一些帮助。。我是JS的初学者

//用于显示隐藏菜单的Javascript
document.getElementById（“显示菜单”）.addEventListener（“单击”，菜单显示）；
函数menuShow（）
{
document.getElementById（'content'）.style.left=“20%”；
document.getElementById（'content'）.style.opacity=“0.6”；
document.getElementById（“内容”）.style.transition=“不透明2s”；
};
//隐藏菜单的Javascript
document.getElementById（“hideMenu”）.addEventListener（“单击”，菜单侧）；
函数menuHide（）
{
document.getElementById（'content'）.style.left=“0”；
document.getElementById（'content'）.style.opacity=“1”；
document.getElementById（“内容”）.style.transition=“无”；
};
正文
{
位置：相对位置；
保证金：0；
}
/*固定标题和显示菜单按钮的样式*/
#标题
{
宽度：100%；
高度：60px；
背景颜色：灰色；
位置：固定；
排名：0；
z指数：1；
}
#展示菜单
{
高度：50px；
宽度：50px；
文本对齐：居中；
背景色：透明；
边界半径：5px；
位置：绝对位置；
左：40px；
顶部：5px；
线高：0.2px；
字体大小：50px；
边界：无；
}
#显示菜单：悬停
{
光标：指针；
}
/*内容div的样式*/
#内容
{
高度：768px；
宽度：100%；
背景色：#0B243B；
位置：绝对位置；
顶部：0px；
左：0%；
-网络工具包盒阴影：-7px 0px 15px 0px rgba（0,0,0,0.75）；
-moz盒阴影：-7px 0px 15px 0px rgba（0,0,0,0.75）；
盒影：-7px 0px 15px 0px rgba（0,0,0,0.75）；
文本对齐：居中；
颜色：白色；
}
P
{
宽度：50%；
保证金：0自动；
位置：相对位置；
顶部：100px；
文本对齐：对齐；
字体大小：20px；
字体系列：calibri；
文本缩进：50px；
}
/*隐藏菜单div和隐藏菜单按钮的样式*/
#隐藏菜单
{
身高：765px；
宽度：20%；
背景颜色：灰色；
位置：固定；
}
#希德梅努
{
高度：50px；
宽度：50px；
背景色：白色；
边界半径：3px；
位置：绝对位置；
右：30px；
顶部：-25px；
字体系列：calibri；
边界：无；
背景色：透明；
字号：80px；
}
#希德曼努：悬停
{
光标：指针；
颜色：白色；
}
/*隐藏菜单链接的样式*/
#李希登
{
列表样式类型：无；
字体系列：calibri；
字体大小：20px；
位置：相对位置；
顶部：100px；
边缘顶部：10px；
左边距：20px；
边框顶部：1件纯黑；
宽度：100px；
左侧填充：10px；
}
#Hiddenul li：悬停
{
颜色：白色；
光标：指针；
}

‹

关于
家
画廊
接触

☰

它来自哪里？
与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学，距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克（Richard McClintock）从《洛伦·伊普斯姆》（Lorem Ipsum）一段中查找了一个更为晦涩的拉丁语单词，即“Concertetur”，并查阅了古典文学中对该词的引用，发现了该词无可置疑的来源。Lorem Ipsum来自西塞罗于公元前45年所著《德菲尼布斯·博诺勒姆和马洛勒姆》（善与恶的极端）的第1.10.32节和第1.10.33节。这本书是一本关于伦理学理论的论文，在文艺复兴时期非常流行。Lorem Ipsum的第一行“Lorem Ipsum dolor sit amet..”来自第1.10.32节中的一行

以下是自1500年代以来使用的Lorem Ipsum的标准块，供感兴趣的人参考。西塞罗的“de Finibus Bonorum et Malorum”中的第1.10.32节和第1.10.33节也以其原始形式复制，并附有H.Rackham 1914年翻译的英文版本。

根据您的方法（您正在向内容中添加20%
left
css属性），我建议您从左侧滑动菜单，然后将页面向右移动

因此，您所需要的是：

#content {
  position: relative;
  transition: all 2s;
}
#content.menuShown {
  left: 20%;
}

然后单击javascript处理程序

document.getElementById("showMenu").addEventListener("click", function(){
  document.getElementById("content").classList.toggle("menuShown");
});

document.getElementById("hideMenu").addEventListener("click", function(){
  document.getElementById("content").classList.toggle("menuShown");
});

这样，每当您单击菜单按钮时，就可以切换
.menuShown
类以获取
#content
元素。当内容元素具有class
.menuShown
时，它会随着转换向右移动20%。
这是

PS：当显示菜单时，可以看到一个水平滚动条，您可以使用
body{overflow-x:hidden；}
隐藏它。或者，您可以从中创建一个类，并仅当菜单以与指定类相同的方式可见时才将其指定给body。
使用animate.css

从下载animate.css

将其添加到项目中

<button  class="fadeOutFade"> &#8249</button>
  <ul>
    <li><a>About </a></li>
    <li><a> Home </a></li>
    <li><a> Gallery </a></li>
    <li><a> Contact </a></li>
  </ul>
</div>
<div id=content>
  <div id=header>

‹

关于
家
画廊
接触

我想这个链接会对你有所帮助

将css中的事务属性用于隐藏的div

-webkit-transition: 2s; /* for Safari browser */
transition: 2s;

它将显示所有变化（包括颜色变化）的平滑运动

-webkit-transition: 2s; /* for Safari browser */
transition: 2s;