需求：通过JS实现元素背景渐变平滑显隐，不可用JS添加transition

现有代码实现了.process__card元素鼠标悬停时添加随机渐变背景、移出时移除背景的功能，但缺少平滑过渡效果。要求通过JS实现平滑过渡，且禁止通过JS为元素添加transition属性。

解决方案 #

核心思路 #

直接切换元素background属性（从纯色/none到渐变）无法触发CSS过渡，因此我们通过新增一个覆盖卡片的背景层，利用CSS已定义的transition实现透明度的平滑变化，间接达成渐变背景的淡入淡出效果，完全符合要求。

修改后的完整代码 #

CSS 代码

.process {
  padding-top: 140px;
}

.process__wrapper {
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  gap: 30px;
  width: 1234px;
}

.process__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F3F3F3;
  height: 159px;
  border-radius: 45px;
  border: 1px solid #191A23;
  box-shadow: 0 5px 0 0 #191A23;
  transition: 0.5s all;
  position: relative; /* 为背景层提供定位基准 */
  overflow: hidden; /* 避免背景超出卡片圆角 */
}

/* 新增渐变背景层 */
.process__card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 默认隐藏 */
  transition: inherit; /* 继承卡片的过渡属性 */
  border-radius: inherit; /* 继承卡片圆角 */
}

.process__card_active {
  height: 279px;
}

HTML 代码

<div class="process__card">
  <!-- 新增渐变背景层 -->
  <div class="process__card-bg"></div>
  <div class="process__content">
    <div class="process__lable">01<span>Consultation</span></div>
    <div class="process__plus"></div>
  </div>
  <div class="process__subcontent process__subcontent_hidden">
    <hr>
    <div class="process__descrp">During the initial consultation, we will discuss your business goals and objectives, target audience, and current marketing efforts. This will allow us to understand your needs and tailor our services to best fit your requirements.</div>
  </div>
</div>

JS 代码

const card = document.querySelectorAll('.process__card');
card.forEach(cardItem => {
  cardItem.addEventListener('mouseover', animationBackground);
  cardItem.addEventListener('mouseout', animationBackground);
});

function animationBackground(event) {
  const eventType = event.type;
  const target = event.target.closest('.process__card');
  if (!target) return;

  const bgLayer = target.querySelector('.process__card-bg');
  if (!bgLayer) return;

  if (eventType === 'mouseover') {
    const color1 = getRandomColor();
    const color2 = getRandomColor();
    bgLayer.style.background = `linear-gradient(45deg, ${color1}, ${color2})`;
    bgLayer.style.opacity = '1'; // 淡入渐变背景
  }

  if (eventType === 'mouseout') {
    bgLayer.style.opacity = '0'; // 淡出渐变背景
  }
}

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

效果说明 #

• 鼠标悬停时，背景层透明度从0平滑过渡到1，渐变背景自然淡入；
• 鼠标移出时，透明度从1平滑过渡到0，渐变背景自然淡出；
• 全程复用CSS中已定义的transition属性，未通过JS添加任何过渡样式，满足限制条件；
• 卡片原有背景色始终保留，渐变背景仅作为叠加层，视觉效果和谐。

内容的提问来源于stack exchange，提问作者Егор