Javascript CSS从上到下的转换，反之亦然

我的过渡不起作用

我有这个HTML：

#容器{
位置：绝对位置；
排名：0；
左：0；
右：0；
身高：0；
}
#抽屉{
位置：绝对位置；
背景：红色；
左：0；
右：0；
排名：0；
底部：自动；
/*这种过渡不起作用*/
过渡期：全部0.5年；
}
#抽屉关闭了{
顶部：自动；
底部：0；
/*这种过渡不起作用*/
过渡期：全部0.5年；
}

这应该会下滑

这应该会下滑

这应该会下滑

这应该会下滑

这应该会下滑

这应该会下滑

这应该会下滑

这应该会下滑

您可以使用visibility attr：

#drawer {
  position: absolute;
  background: red;
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  /* This transition is working now*/
  visibility: visible;
  transition: visibility 2s, opacity 0.5s linear;
  opacity: 1;
}

#drawer.closed {
  bottom: 0;
  /* This transition is working now*/
  visibility: hidden;
  transition: visibility 2s, opacity 0.5s linear;
  opacity: 0;
}

---

让我知道这是否有帮助

在经过长时间的尝试和错误之后，我已经确定这不能用纯CSS来完成。我将使用该功能来执行此操作。

您无法转换到/从

自动

。单击按钮时是否要打开它？@Konrud是的这不是不透明度/可见性问题。这是一个高度问题。这是代奇尔需要的另一种方式。我还没看到你的工作答案，保利诺，不是。他想要一个向下滑动的选项，但这不是。他需要的是javascript。