将顶部设置为自动时触发 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 设置为 auto 以外的其他内容，则会触发它，例如top: 50%.

如何让我的 project-text 框平滑地进出，同时弹出足以显示所有文本？提前致谢！

Answer 1

基本上你不能将任何东西转换成auto。转换等依赖于数字而auto不是一个数字。

我建议您查看 transform.

而不是使用更改 top 值等

html {
  font-size: 18px;
  height: 100%;
}

body {
  color: rgb(177, 177, 177);
  height: 100%;
  background-color: #121212;
}

h3 {
  font-size: 2rem;
  color: #ffffff;
  text-decoration: none;
  opacity: 0.87;
  margin: 0;
}

.projects {
  height: 100%;
  background-color: #121212;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 300px 300px;
  grid-template-areas: 'project1 project2' 'project3 project4';
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 5%;
  grid-gap: 5%;
}

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

.project-box:hover .project-text {
  transform: translateY(-100%);
  transition: all 0.5s ease;
}

.project-box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: center;
  align-items: flex-end;
  background-position: center;
  background-size: cover;
  position: relative;
  background: #121212;
  overflow: hidden;
}

.project-box:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.project-box:hover::before {
  opacity: 0.6;
}

.project1 {
  grid-area: project1;
}

.project1:before {
  background-image: url('https://darrengreenfield.com/cafeandkids.png');
}

<body>
  <div class="projects" id="projects">
    <div class="project1 project-box">
      <div class="project-text">
        <a href="https://cafeandkids.com" target="_blank" rel="noopener noreferrer">
          <h3>cafeandkids.com</h3>
        </a>
        <p>
          An app to help parents find great playgrounds near great coffee shops. A single page, front-end only app using HTMl, CSS, JavaScript and React. Uses Google Maps API and the OpenWeather API.
        </p>
      </div>
    </div>
  </div>
</body>

将顶部设置为自动时触发 CSS 转换

Triggering CSS transition when setting top to auto

css

css-transitions