为内容高度添加偏移量以动画悬停向上滑动效果

问题描述

我正在尝试用描述内容的高度偏移图片上方带有标题和描述的块。考虑这张照片：

默认情况下，两个标题都应该可见，但在悬停时描述应该向上滑动。我不知道幻灯片的确切高度，因为内容的长度可能会改变。即使在页面加载时使用 js，我也找不到正确的偏移量，因为它看起来不正确，我认为是由于字体加载速度太慢，因此在页面加载完成后更改了内容的高度。

我可以根据需要更改 HTML，因此我尝试将上下内容分开，如下所示：

<div style="background-image: url(https://via.placeholder.com/175x175)">
  <div class="wrapper">
    <div class="team-Meta">
      <div class="block-title"><p>TITLE PRESIDENT</p></div>
      <div class="team-name">TITLE PRESIDENT</div>
    </div>
    <div class="team-description">On Hover,darken overlay and add a brief one sentence description of the person if desired.</div>
  </div>
</div>

并添加这些样式：

.team-Meta {
  position: absolute;
  bottom: 0; /*always at the very bottom of the block*/
}
.team-description {
  position: absolute;
  top: 100%; /*always right below the block*/
}

这种方式在页面加载时描述是默认隐藏的，但现在很难在悬停时显示它。我必须计算以下内容：

对于描述：顶部：[父级的高度] - [描述的高度]

对于标题：底部：[描述的高度]

这很不方便。我觉得应该有一个技巧可以让这一切变得更容易，而且步骤可能更少。

顺便说一句，我使用以下代码实现了一些东西，这是一场灾难：

document.querySelectorAll('.team-container').forEach((e) => {
  anime({
    targets: e.querySelector(".team-description"),top: e.querySelector('.wrapper').offsetHeight - e.querySelector('.team-description').offsetHeight + "px"
  }); 
  anime({
    targets: e.querySelector(".team-Meta"),bottom: e.querySelector('.team-description').offsetHeight + "px"
  });
});

我在这里遇到了一个问题，因为在动画过渡时animejs 似乎错误地将 100% 转换为 PX 值，并且块似乎来自顶部，而不是底部，原始位置。

我觉得这个问题可以很简单地解决，但我还没有找到出路。

解决方法

如果我正确理解您的问题，这种方法没有 JS。

body {
  display: flex;
  gap: 10px;
}

.avatar {
  background-repeat: no-repeat;
  z-index: 5;
}

.wrapper {
  width: 175px;
  height: 150px;
  position: relative;
  background-color: #a4cedf;
}

.team-meta {
  position: absolute;
  bottom: 0;
}

.team-description {
  padding: 20px 10px;
  position: absolute;
  top: 0%;
  background-color: #80b7ce;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.wrapper:hover .team-description {
  top: 100%;
}

<div class="avatar" style="background-image: url(https://via.placeholder.com/175x175)">
  <div class="wrapper">
    <div class="team-meta">
      <div class="block-title">
        <p>TITLE PRESIDENT</p>
      </div>
      <div class="team-name">TITLE PRESIDENT</div>
    </div>
    <div class="team-description">
      On Hover,darken overlay and add a brief one sentence description of the person if desired.
    </div>
  </div>
</div>
<div class="avatar" style="background-image: url(https://via.placeholder.com/175x175)">
  <div class="wrapper">
    <div class="team-meta">
      <div class="block-title">
        <p>TITLE PRESIDENT</p>
      </div>
      <div class="team-name">TITLE PRESIDENT</div>
    </div>
    <div class="team-description">
      On Hover,darken overlay and add a brief one
    </div>
  </div>
</div>
<div class="avatar" style="background-image: url(https://via.placeholder.com/175x175)">
  <div class="wrapper">
    <div class="team-meta">
      <div class="block-title">
        <p>TITLE PRESIDENT</p>
      </div>
      <div class="team-name">TITLE PRESIDENT</div>
    </div>
    <div class="team-description">On Hover,darken overlay and add.</div>
  </div>
</div>

我想是我失败了，或者我不确定发生了什么。但是下面的脚本突然返回了正确的 offsetHeight 值。因此，使用容器，我设法使用单个边距动画来操纵整个块。现在它完全有道理！

我仍然觉得这可以在没有 JS 入侵的情况下完成，但我想不通。

(function () {

document.querySelectorAll('.team-container > div').forEach((e) => {

  let offset = e.querySelector('.team-description').offsetHeight;

  e.querySelector(".team-card").style.marginBottom = -offset + "px";
}

}());

html javascript