Javascript 设置此侧菜单的转换速度时遇到问题

我是新的网络开发，我有困难的过渡速度来打开和关闭这个侧菜单。即使在向CSS添加转换和向Javascript添加持续时间后，菜单也会立即打开。我来这里之前做过研究，但似乎什么都不管用。 如果你们中有人能帮忙，那就太好了

函数openNav（）{ document.getElementById（“mySidepanel”）.style.width=“250px”； document.getElementById（“mySidepanel”）.style.transitionDuration=“0.5s”； document.getElementById（“mySidepanel”）.style.display=“block”； document.getElementById（“openbtn”）.style.display='none'； } 函数closeNav（）{ document.getElementById（“mySidepanel”）.style.width=“0”； document.getElementById（“mySidepanel”）.style.transitionDuration=“0.5s”； document.getElementById（“mySidepanel”）.style.display=“无”； document.getElementById（“openbtn”）.style.display=“内联块”； }

/**导航栏**/
.侧面板{
宽度：0；
位置：固定；
z指数：1；
身高：100%；
排名：0；
右：0；
背景色：rgba（17,17,17,0.425）；
溢出x：隐藏；
填充顶部：60px；
过渡：所有0.5s缓进缓出；
}
.侧面板a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
字体系列：“lato”，无衬线；
颜色：#818181；
显示：块；
}
.侧面板a：悬停{
颜色：#f1f1；
}
.侧面板#关闭Btn{
位置：绝对位置；
顶部：10px；
右：20px；
字体大小：36px；
左边距：50像素；
}
#openbtn{
字体大小：30px；
光标：指针；
背景：-webkit线性梯度（白色，#38495a）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
填充：10px 15px；
边界：无；
浮动：对；
}
#openbtn：悬停{
背景：-webkit线性梯度（#748df0c9，#324dbbc9）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
a:悬停{
颜色：#3e5ddac9；
文本阴影：0 0 5px#3e5ddac9；
}
a:悬停，远点{
颜色：#3e5ddac9；
文本阴影：0 0 5px#3e5ddac9；
}

☰您不能在显示属性上使用过渡，但您已经在使用宽度，所以只使用这个，它就可以正常工作。无需使用Javascript更改转换效果，这已在CSS中定义


函数openNav（）{
document.getElementById（“mySidepanel”）.style.width=“250px”；
document.getElementById（“openbtn”）.style.top='-50px'；
}
函数closeNav（）{
document.getElementById（“mySidepanel”）.style.width=“0”；
document.getElementById（“openbtn”）.style.top='10px'；
}

/**导航栏**/
.侧面板{
宽度：0；
位置：固定；
z指数：1；
身高：100%；
排名：0；
右：0；
背景色：rgba（17,17,17,0.425）；
溢出x：隐藏；
填充顶部：60px；
过渡：所有0.5s缓进缓出；
}
.侧面板a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
字体系列：“lato”，无衬线；
颜色：#818181；
显示：块；
}
.侧面板a：悬停{
颜色：#f1f1；
}
.侧面板#关闭Btn{
位置：绝对位置；
顶部：10px；
右：20px；
字体大小：36px；
左边距：50像素；
}
#openbtn{
字体大小：30px；
光标：指针；
背景：-webkit线性梯度（白色，#38495a）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
填充：10px 15px；
边界：无；
位置：固定；
顶部：10px；
右：10px；
过渡：所有0.5s缓进缓出；
}
#openbtn：悬停{
背景：-webkit线性梯度（#748df0c9，#324dbbc9）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
a:悬停{
颜色：#3e5ddac9；
文本阴影：0 0 5px#3e5ddac9；
}
a:悬停，远点{
颜色：#3e5ddac9；
文本阴影：0 0 5px#3e5ddac9；
}

☰转换现在可以完美地工作。我真的很感激。但是，当单击X（关闭按钮）时，它会显示☰ （打开按钮）位于X下方，X将在约0.5秒内消失。有办法解决这个问题吗。很抱歉，如果我的解释很糟糕。@DevilDonkey，你不能仅使用CSS在浮动元素上使用转换，因此，你可以将其设置为固定或绝对，并播放“更改不透明度”来完成此操作。顺便说一句，你的解释很清楚。太棒了！现在一切都如我所希望的那样顺利。我真的很感谢你的帮助。谢谢你。