卡片描述滑入方向调整及JS快速悬停问题求助

问题描述 #

• 卡片描述区域（card-description）的显示/隐藏动画为从下到上，需改为从上到下
• 快速多次移入移出卡片时，原JS逻辑出现异常，希望尽量减少JS依赖

现有代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="card">
  <div class="card-thumbnail">
    <div class="card-date">16</div>
    <img src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80" alt="" />
  </div>

  <div class="card-content">
    <div class="card-category">Errors</div>
    <div class="card-title">
      SASS/CSS - Gérer les images au sein de symfony test test
    </div>
    <div class="card-description">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto corporis culpa cupiditate ducimus enim facere facilis fugit in ipsum labore, magni nihil perferendis qui rerumtemporibuslaboreaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <div class="card-comments">39 comments</div>
  </div>
</div>

CSS #

/* automated conversion from SCSS */

.card {
  position: relative;
  background: white;
  margin: 50px;
  width: 400px;
  height: 500px;
  box-shadow: 0px 1px 2px 0px #000;
  transition: all 0.3s linear 0s;
  z-index: 1;
}

.card:hover {
  box-shadow: 0px 1px 35px 0px #000;
}

.card:hover .card-thumbnail img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  transform: scale(1.05);
  opacity: 0.6;
  transition: all 0.3s linear 0s;
}

.card:hover .card-content {
  position: absolute;
  bottom: 25px;
}

.card:hover .card-content .show-desc {
  opacity: 1;
  height: 150px;
}

.card .card-thumbnail {
  position: relative;
  overflow: hidden;
  height: 300px;
}

.card .card-thumbnail .card-date {
  position: absolute;
  background-color: #f7941d;
  height: 55px;
  width: 55px;
  right: 20px;
  top: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  z-index: 2;
}

.card .card-thumbnail img {
  height: 100%;
  object-fit: cover;
  position: absolute;
  width: 100%;
  transition: all 0.3s linear 0s;
}

.card .card-content {
  position: relative;
  background: white;
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05);
  transition: bottom 2s linear;
  bottom: 0;
}

.card .card-content .card-category {
  position: absolute;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f7941d;
  padding: 0 15px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  top: -40px;
  left: 0;
}

.card .card-content .card-title {
  margin-bottom: 10px;
  color: #f7941d;
  font-size: 1.4rem;
  font-weight: 700;
  height: 100px;
}

.card .card-content .card-description {
  display: none;
  height: 0;
  opacity: 0;
  color: black;
  font-size: 0.9rem;
  line-height: 1.8em;
  word-break: break-all;
  transition: opacity 2s, height 2s;
  overflow: hidden;
}

JS #

$(".card").hover(
  function() {
    let desc = $(this).find(".card-description");
    desc.css("display", "block");
    setTimeout(function() {
      desc.addClass("show-desc");
    }, 20);
  },
  function() {
    let desc = $(this).find(".card-description");
    desc.removeClass("show-desc");
    setTimeout(function() {
      desc.css("display", "none");
    }, 2000);
  }
);

解决方案 #

核心思路 #

1. 完全移除JS依赖，用CSS hover实现所有交互，避免定时器队列堆积问题
2. 用max-height替代height控制描述区域的展开/收起，实现从上到下的动画方向

修改后的代码 #

HTML（无需改动）

同现有HTML代码

CSS（关键修改）

/* automated conversion from SCSS */

.card {
  position: relative;
  background: white;
  margin: 50px;
  width: 400px;
  height: 500px;
  box-shadow: 0px 1px 2px 0px #000;
  transition: all 0.3s linear 0s;
  z-index: 1;
}

.card:hover {
  box-shadow: 0px 1px 35px 0px #000;
}

.card:hover .card-thumbnail img {
  transform: scale(1.05);
  opacity: 0.6;
  transition: all 0.3s linear 0s;
}

.card:hover .card-content {
  position: absolute;
  bottom: 25px;
  transition: bottom 0.3s linear; /* 缩短过渡时长提升流畅度 */
}

/* --- 描述区域动画核心修改 --- */
.card .card-content .card-description {
  max-height: 0; /* 初始隐藏状态 */
  opacity: 0;
  color: black;
  font-size: 0.9rem;
  line-height: 1.8em;
  word-break: break-all;
  transition: opacity 0.5s ease, max-height 0.5s ease; /* 调整过渡曲线更自然 */
  overflow: hidden;
  display: block; /* 移除display:none，用max-height控制显示 */
}

.card:hover .card-content .card-description {
  opacity: 1;
  max-height: 150px; /* 展开时的最大高度，适配内容 */
}
/* --- 修改结束 --- */

.card .card-thumbnail {
  position: relative;
  overflow: hidden;
  height: 300px;
}

.card .card-thumbnail .card-date {
  position: absolute;
  background-color: #f7941d;
  height: 55px;
  width: 55px;
  right: 20px;
  top: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  z-index: 2;
}

.card .card-thumbnail img {
  height: 100%;
  object-fit: cover;
  position: absolute;
  width: 100%;
  transition: all 0.3s linear 0s;
}

.card .card-content {
  position: relative;
  background: white;
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05);
  bottom: 0;
}

.card .card-content .card-category {
  position: absolute;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f7941d;
  padding: 0 15px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  top: -40px;
  left: 0;
}

.card .card-content .card-title {
  margin-bottom: 10px;
  color: #f7941d;
  font-size: 1.4rem;
  font-weight: 700;
  height: 100px;
}

JS（完全移除）

无需任何JS代码，所有交互由CSS原生实现

效果说明 #

1. 动画方向调整：通过max-height从0过渡到150px，内容会从上到下逐步展开，解决原动画方向问题
2. 快速悬停修复：CSS hover状态实时响应鼠标动作，不会出现定时器队列导致的异常显示
3. 细节优化：缩短部分过渡时长，移除冗余浏览器前缀，提升整体交互流畅度

内容的提问来源于stack exchange，提问作者Tomi Douma