将顶部设置为自动时触发CSS过渡

Question

我正在建立一个个人作品集网站来展示一些项目，并试图实现以下目标：

• 网站的屏幕快照在图片底部的卡片上显示了该网站的标题
  • 当用户将鼠标悬停在图像上时，图像消失，并且图像底部的卡片顺利弹出以显示该站点的描述

已完成所有设置，但是我无法使卡从图像底部平滑过渡，目前它已从其起始位置跳到结束位置。

一个密码笔在这里：https://codepen.io/umbauk/full/vYYZEjW

我的代码的相关部分在这里：

.project-text {
  background-color: rgb(58, 58, 58);
  padding: 1%;
  z-index: 5;
  position: absolute;
  width: 100%;
  top: calc(100% - 3rem);
  left: 0;
  transition: all 0.5s ease;
}

.project-box:hover .project-text {
  top: auto;
  bottom: 0;
  transition: all 0.5s ease;
}

project-text框的大小可变，因此我最初将其设置为显示文本框的顶部3rem，以便仅显示标题。悬停时，我设置bottom: 0以便显示所有文本（并设置top: auto以便设置底部可以覆盖顶部。

但是，未触发transition: all 0.5s ease;。如果我将top设置为自动以外的其他设置，则会触发该事件。 top: 50%。

如何在弹出足够显示所有文本的同时，使项目文本框平稳地过渡和过渡？预先感谢！

Answer 1

基本上，您不能将任何内容转换到auto。