悬停时元素过渡到绝对定位的动画失效问题求助

嘿，我一眼就瞅到问题啦！你用了display: none来隐藏.profile__button，但**display属性是不支持CSS过渡动画**的——它是瞬间切换状态，根本不会给过渡效果留时间。这就是动画没生效的核心原因！

正确的做法：用支持过渡的属性控制显隐 #

我们可以用opacity（透明度）、visibility（可见性）结合transform（位移）来实现平滑过渡，替换掉display: none。下面是修改后的完整代码：

HTML（无需改动）

<div class="profile__container">
  <img src="http://i.imgur.com/SGw04SV.jpg" class="profile__list--resume img-fluid" />
  <div class="profile__button">
    <h2>Hello World</h2>
  </div>
</div>

修改后的CSS

.profile__container {
  position: relative; /* 让子元素的绝对定位以它为基准 */
  display: inline-block;
}

.profile__button {
  /* 替换display:none为这些支持过渡的属性 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px); /* 初始向下偏移，增强动画层次感 */
  transition: all 0.3s ease; /* 定义过渡的时长和缓动效果 */
  
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, transparent 0%, #08ca77 60%);
  padding: 120px 15px 15px;
}

/* 悬停时触发动画 */
.profile__container:hover .profile__button {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

关键细节说明 #

• opacity: 0让元素完全透明但仍占据空间（避免页面布局跳动），搭配visibility: hidden可让元素无法被点击；
• transform: translateY(20px)给元素加初始位移，悬停时移回原位，动画会更自然流畅；
• 给.profile__container加position: relative，确保.profile__button的绝对定位不会脱离父容器；
• transition: all 0.3s ease定义了所有可过渡属性的动画时长为0.3秒，用ease缓动让动画更顺滑。

这样修改后，你悬停在.profile__container上时，.profile__button就会平滑地显示出来啦！

内容的提问来源于stack exchange，提问作者Elaine Byene