转换和Javascript

提前道歉，我对过渡完全陌生

我正在使用CSS和JavaScript尝试创建一个菜单，该菜单在单击时可以平滑地向下滑动，在再次单击时也可以平滑地返回

我尝试模拟一个示例动画，如下所示：

我的相关代码如下：

HTML

JS

单击会隐藏和显示元素，但不会提供动画。我试图只使用CSS来实现这个效果，但我发现了相同的结果，它确实隐藏和显示，但没有平滑的向下滑动。这让我觉得我在CSS方面做得不对

仅CSS尝试：

.sort:hover .sort-options {
  display: flex;
}

.sort-options {
  visibility: hidden;
  margin: 20px;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  font-size: 20px;
  width: 100%;
  transition: all 3s ease-in-out;
}

如果您想查看我的完整代码，请参见：

我浏览了stackoverflow，似乎不支持将显示作为过渡效果，但我不确定如果div不可见，如何在不占用空间的情况下使用可见性来实现效果

---

谢谢你的帮助

这是因为您使用

显示

来设置动画，而该动画未设置动画。您正在查找

不透明度

和

指针事件

，它们可以给出类似的结果

下面是一个例子

.sort{
宽度：100px；
文本对齐：居中；
}
.分类标题{
位置：相对位置；
z指数：2；
背景色：白色；
}
.sort：悬停。排序选项{
不透明度：1；
变换：translateY（0px）；
指针事件：全部；
}
.排序选项{
显示器：flex；
宽度：100%；
弯曲方向：立柱；
调整项目：灵活启动；
利润率：20px；
字体大小：20px；
过渡：所有3个易于输入输出；
转换：translateY（-50px）；
不透明度：0；
指针事件：无；
}

分类
1.
2.
3.

显示为

转换的原因不起作用，是因为没有可设置动画（转换）到/从的值。“显示”属性更像是“开/关”

这里有一个简单的例子


#容器{
位置：相对位置；
高度：2em；
宽度：300px；
背景颜色：蓝色；
保证金：自动；
}
.菜单{
位置：绝对位置；
可见性：隐藏；
显示器：flex；
顶部：2rem；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
背景颜色：灰色；
高度：0雷姆；
宽度：100%；
溢出：隐藏；
过渡：高度1s缓进缓出，能见度1s缓进缓出；
}
#容器：悬停。菜单{
能见度：可见；
高度：8雷姆；
}

项目1

项目2

项目3

这不就是：Tl；Dr：您不能将
显示
，也不能将
高度
0
转换为
自动
。谢谢您的回复。关于你的例子，我有几个问题。我使用了它，它确实添加了一个我可以处理的动画，但是我如何才能使这些div在隐藏时不占用空间呢？在[visibility]情况下，该空间始终被占用。我怎样才能把它翻译成javascript？@Wulfen，检查我的编辑。虽然没有测试代码，但应该很好！我认为位置：绝对给了我我想要的。我有足够的钱继续，谢谢@沃尔芬，当然。如果我回答了您的问题，您可以将其标记为已接受的答案谢谢，我想我理解显示不是我可以转换的属性。我该如何确保这些div在隐藏时使用的空间不会被占用？那么您可以继续添加/删除display:flex/display:none，就像您最初那样。
.sort-options {
  margin: 20px;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  font-size: 20px;
  width: 100%;
  transition: display 3s ease-out;
}

  const sortDiv = document.querySelector('.sort') 
  sortDiv.addEventListener('click', function() {
    const sortOptions = document.querySelector('.sort-options');
    if (sortOptions.style.display === 'none') {
      sortOptions.style.display = 'flex';
    } else {
      sortOptions.style.display = 'none';
    }
  }); 

.sort:hover .sort-options {
  display: flex;
}

.sort-options {
  visibility: hidden;
  margin: 20px;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  font-size: 20px;
  width: 100%;
  transition: all 3s ease-in-out;
}