Div的渐变背景过渡没有变透明

Question

我正在制作一个 js 播放器，我有 html 个代表歌曲的容器。在这个容器内，我还附加了菜单。单击歌曲的容器将 selected class 添加到它的 class 列表中，通过过渡更改 background（不是 background-color）的颜色。问题是单击 div 时变得透明（我想暂时失去其旧背景属性）然后过渡到新的背景颜色。它使菜单的上边缘在过渡期间可见。我想知道有没有办法在没有透明时刻的情况下改变背景。

JSfiddle：https://jsfiddle.net/8d12hu3r/14/

container = document.getElementById('songContainer');
container.addEventListener('click', function() {
  container.classList.add('selected');
});

#songContainer {
  width: 100%;
  height: 100%;
  min-width: 100%;
  position: relative;
  background: -webkit-linear-gradient(left, rgb(223, 228, 248), rgb(223, 228, 248), rgb(223, 228, 248));
  /*background: rgb(223, 228, 248);*/
  text-align: center;
  border-radius: 10px;
  font-size: 15px;
  padding: 10px;
  transition-duration: 5s;
}

.selected {
  color: white;
  background: #2b3492 !important;
  transition: 5s;
}

#menuBump {
  position: absolute;
  width: 100%;
  bottom: 0px;
  left: 0px;
}

#songMenu {
  border-radius: 0px 0px 10px 10px;
  /*display: table;*/
  min-width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  /*bottom: 0px;*/
  padding-bottom: 10px;
  padding-top: 10px;
  z-index: 10;
  background: #fff1e3;
}

.songMenu-item {
  background: inherit;
  color: black;
  padding: 10px;
  transition-duration: 5s;
}

.songMenu-item:hover {
  font-weight: bold;
  background: #ac4d8f;
}

<div id="song-menu-container" style="position: relative; height: 20px;">
  <div id="songContainer" style="z-index: 10000">Gehou</div>
  <div id="menuBump">
    <div id="songMenu">
      <div class="songMenu-item" data-id="2">Nise</div>
      <div class="songMenu-item" data-id="5">asdf</div>
      <div class="songMenu-item" data-id="8">zcdaaassdasd</div>
    </div>
  </div>
</div>

我也试过用js改变背景属性本身，结果还是一样

Answer 1

@keyframes example {
  from {opacity: 0.5;}
  to {opacity: 1;}
}


#songContainer {
  animation-name: example;
  animation-duration: 4s;
}

我认为这可以让您了解自己可以做什么

Answer 2

发生这种情况是因为您使用的是 background 而不是 background-color。更具体地说：

background 是多个属性的 shorthand。您使用的衬里渐变是 background-image，而您要过渡到的纯色是 background-color。所以你要转换两个不同的东西，这是行不通的。
即使您尝试过渡到不同的线性渐变，它仍然无法正常工作，因为您根本无法过渡渐变。

幸运的是，您的解决方案非常简单：您使用的线性渐变实际上根本不是渐变——它一直都是相同的颜色——所以你可以用背景色替换它，然后那么一切都会好起来的。您在渐变下方的注释掉的代码正是您想要的。

如果您正在尝试找出如何过渡渐变，因为您不能直接这样做，所以您必须做一个更复杂的解决方法。例如，您可以在渐变上叠加半透明颜色以模仿您想要的外观，然后过渡该叠加层，使其完全覆盖其下方的渐变。

Div的渐变背景过渡没有变透明

Div's gradient background transition without it becoming transparent

html

javascript

css

css-transitions