Javascript 如何在打开菜单时添加CSS转换？

我还是编程新手，我想在打开菜单的dropdowm时创建一个漂亮的过渡效果

按照现在的方式，菜单立即出现，没有任何过渡。在没有下拉菜单的菜单中，我设法创建了一个过渡效果。但我不知道如何为下拉菜单创建这种过渡效果

当我打开下拉菜单时，你能告诉我如何创建过渡效果吗

我把我的代码放入

导入“/styles.scss”；
从“react router dom”导入{NavLink}；
导出默认函数App（）{
const onCompany=（e）=>{
e、 预防默认值（）；
};
返回(


服务


案例


关于
卡勒斯
文章


);
}

。菜单内容{
显示器：flex；
高度：104px；
证明内容：中心；
}
.菜单链接{
显示器：flex；
证明内容：之间的空间；
列表样式类型：无；
文字装饰：无；
保证金：0；
身高：100%；
宽度：45%；
}
李{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
字体系列：Alliance2；
转换：转换250ms缓进缓出；
&：第n个子级（-n+2）{
&：之后{
显示：块；
内容：“；
边框底部：实心3px#000；
变换：scaleX（0）；
转换：转换250ms缓进缓出；
}
&：悬停：之后{
变换：scaleX（1）；
}
}
a{
对齐项目：居中；
颜色：#000；
显示器：flex；
字体大小：22px；
字号：600；
填充物：5px；
身高：100%；
文字装饰：无；
}
&.下拉列表{
.下拉内容{
最高：100%；
}
}
}
.下拉内容{
显示：无；
最小宽度：160px；
位置：绝对位置；
文本转换：大写；
背景颜色：灰色；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
顶部：104px！重要；
a{
显示：块；
字体大小：14px；
字号：600；
颜色：#000；
填充：12px 16px；
文本对齐：居中；
&：悬停{
颜色：#fff；
}
}
}
.下拉：悬停.下拉内容{
显示：块；
}

添加到您的styles.scs

.dropdown-content {
  opacity: 0;
  transition: opacity 1s ease;
}

.dropdown:hover .dropdown-content {
  opacity: 1;
}

---

添加到您的styles.scss

.dropdown-content {
  opacity: 0;
  transition: opacity 1s ease;
}

.dropdown:hover .dropdown-content {
  opacity: 1;
}