Html 不能'；不要在菜单中添加过渡

我不能在我的下拉菜单（在手机上）和我的工具栏图标上添加任何过渡效果。我应该在哪里放置带有转换的代码？另一方面，像在鼠标悬停时更改字体颜色这样的转换成功地改变了。我认为我的代码结构可能有问题，但我什么也看不到

$（文档）.ready（函数（）{
$（'.menu toggle'）。单击（函数（）{
$（this.toggleClass（'active'）；
$（'nav'）。toggleClass（'active'）；
});
});
正文{
保证金：0；
填充：0；
字体系列：拉托，无衬线；
背景色：#333；
高度：200vh；
}
a{
文字装饰：无；
}
.clearfix{
明确：两者皆有；
}
标题{
位置：固定；
宽度：100%；
填充：1vh 15vw；
最小高度：100px；
框大小：边框框；
背景色：#fff；
}
.标志{
颜色：#417475；
文本转换：大写；
字体大小：粗体；
字体大小：35px；
高度：100px；
线高：100px；
浮动：左；
}
导航{
浮动：对；
}
导航ul{
显示器：flex；
}
李国荣{
列表样式：无；
}
海军ulli a{
显示：块；
利润率：10px0；
填充：10px 20px；
}
导航ulli a：悬停{
颜色：#417475；
}
.菜单切换{
显示：无；
浮动：对；
利润上限：35px；
字体大小：30px；
光标：指针；
}
.菜单切换：之前{
内容：'\f0c9'；
字体系列：Fontsome；
高度：30px；
}
.菜单切换。活动：之前{
内容：'\f00d'；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.菜单切换{
显示：块；
}
导航{
显示：无；
}
主动导航{
显示：块；
宽度：100%；
}
主动导航{
显示：块；
}
主动ul-li-a导航{
保证金：0；
文本对齐：居中；
}
}

投资组合1







当您添加某种转换时，转换会起作用。我尝试了以下方法，效果很好

.menu-toggle.active {
  transition: 3s;
 transform: rotate(-180deg);

}

希望这能提供更多的说明。
您实际上是在
无
和
块
之间切换
的
显示。这只是使
出现和消失。如果你想制作动画，那么
您可以使用引导类创建一个实际的下拉列表，如下所示


$（文档）.ready（函数（）{
$（'.menu toggle'）。打开（'单击'，函数（）{
$（'.menu toggle'）.toggleClass（'active'）；
});
});

投资组合1
身体{
保证金：0；
填充：0；
字体系列：拉托，无衬线；
背景色：#333；
高度：200vh；
/*过渡：均为0.3秒*/
}
a{
文字装饰：无；
}
.clearfix{
明确：两者皆有；
}
标题{
位置：固定；
宽度：100%；
填充：1vh 15vw；
最小高度：100px；
框大小：边框框；
背景色：#fff；
}
.标志{
颜色：#417475；
文本转换：大写；
字体大小：粗体；
字体大小：35px；
高度：100px；
线高：100px；
浮动：左；
/*过渡：所有0.3秒缓解*/
}
导航{
浮动：对；
过渡：均为0.3秒；
}
导航ul{
显示器：flex；
}
李国荣{
列表样式：无；
}
海军ulli a{
显示：块；
利润率：10px0；
填充：10px 20px；
}
导航ulli a：悬停{
颜色：#417475；
}
.菜单切换{
显示：无；
浮动：对；
利润上限：35px；
字体大小：30px；
光标：指针；
}
.菜单切换：之前{
内容：'\f0c9'；
字体系列：Fontsome；
高度：30px；
}
.菜单切换。活动：之前{
内容：'\f00d'；
}
使有生气
{
过渡：均为0.3秒；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.菜单切换{
显示：块；
}
导航{
显示：块；
宽度：100%；
}
导航ul{
显示：块；
}
海军ulli a{
保证金：0；
文本对齐：居中；
}
}







如果您还想设置
动画，则可以使用引导下拉菜单