Jquery 组合显示：无和显示：flex的替代方法

我在组合

display:none

和

display:flex

时遇到问题。我知道在这方面有很多问题。然而，我想分享一种特殊的方法。它不能完全满足我，因为动画与它不兼容。以下是我所做的：

• 我有一个div，我想首先隐藏它，然后在单击（另一个div）时进行切换。因此，隐藏的div（

  navigation

  ）首先应该有一个

  display:none

  ，然后在切换时应该有一个

  display:flex

• 在（

  navi

  ）上单击，一个类被切换（

  显示

  ），在css中，显示的属性有

  显示：flex

  ，另一个用于空间排列
• 问题在于，切换类并不包括添加动画

下面是一个简单的例子：

$（文档）.ready（函数（）{
$（“.navi”）。单击（函数（）{
$（“.navi.fa V形向下”）.toggleClass（“旋转180”）；
$（“.navigation”）.toggleClass（“显示”）
});
});
：根目录{
--bg：米苏糖；
--强调灯：#f67e7d；
--深色调：#A94645；
--重音续：#fff；
--正文：#371C1C；
}
身体{
背景：var（--bg）；
字体系列：helvetica，无衬线；
保证金：0；
填充：0；
颜色：var（--text）；
字号：0.8em；
}
/*航行*/
纳维先生{
光标：指针；
位置：固定；
顶部：计算（10px+7vh）；
左：7vw；
宽度：14vw；
最小宽度：160px；
线高：30px；
边界半径：5px；
溢出：隐藏；
背景：var（--强调光）；
文本对齐：居中；
}
海军一号{
左边距：4.5vw；
线高：30px；
}
.navi.fa雪佛龙酒店{
-webkit过渡：所有0.7秒轻松；
-moz过渡：所有0.7秒轻松；
-ms转换：所有0.7秒轻松；
-o型过渡：所有0.7秒容易；
过渡：所有0.7秒缓解；
}
.旋转180{
变换：旋转（180度）；
}
.导航{
位置：绝对位置；
顶部：计算（30px+12vh）；
左：7vw；
宽度：14vw；
最小宽度：160px；
高度：24小时；
最小高度：200px；
边界半径：5px；
背景：var（--强调光）；
显示：无；
}
.显示{
显示器：flex；
柔性包装：包装；
}
.导航a{
文字装饰：无；
弹性：1；
显示器：flex；
弯曲方向：立柱；
对正内容：空间均匀；
对齐项目：居中；
}
.航程{
颜色：var（--重音cont）；
文本对齐：居中；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
过渡：所有0.3秒缓解；
}
.导航a：悬停i{
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-ms变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
颜色：var（--accent cont）！重要；
}
.导航a：悬停范围{
颜色：var（--text）；
}
.导航一{
显示：块；
颜色：var（--text）！重要；
字体大小：20px；
利润率：0px 10px-10px 10px；
填充物：5px；
-webkit过渡：所有0.5s易入易出；
-moz转换：所有0.5s的易入易出；
-o型过渡：所有0.5s缓进缓出；
过渡：所有0.5s缓进缓出；
}

航行