javascript - 过渡不能与 rgba 一起正常工作

Question

我这里有一个元素，当您单击链接时，我希望在图片上方叠加一层，以便我们可以阅读有关产品的一些信息。我正在寻找的效果是这样的:

为了做到这一点，我有一个包含信息的 div 和包含图片的 div 中的白色背景，如下所示:

      <div id="leftWindow">
        <a href="notalink.html" id="infoButton">+ Information</a>
        <div id="info" class="notVisible">
          Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product
        </div>
      </div>

带有信息的 div 有一个“notVisible”类，我有另一个不透明度为 .7 的类，如下所示:

#info {
    background-color: white;
    transition: opacity 1.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 342px;
    height: 516px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

.visibleIsh {
    opacity: .7;
}

当您点击链接时，一些 javascript 会交换类:

$( document ).on('click', '#infoButton', function(e){
  e.preventDefault();
  $("#info").removeClass("notVisible").addClass("visibleIsh");

});

这行得通，但问题是文本也失去了我不想要的不透明度。为了解决这个问题，我使用 rgba 而不是不透明度，如下所示:

CSS:

.visibleIsh {
    background-color: rgba(255,255,255,.7);
}

#info {
    background-color: rgba(255,255,255,1);
    transition: background-color 1.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 342px;
    height: 516px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

我得到了您可以在 gif 中看到的错误行为。任何帮助表示赞赏。谢谢

Answer 1

目前您所做的只是淡化背景颜色。使用该方法，文本将始终可见。如果您希望它看起来像您的第一个 gif，您应该首先将背景不透明度设置为 .7 并隐藏整个 #info 元素。然后您可以使用 jQuery 在点击时淡入淡出整个元素。

$( document ).on('click', '#infoButton', function(e){
  e.preventDefault();
  $("#info").fadeIn(1500);

});

#info {
    display:none;
    background-color: rgba(255,255,255,.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 342px;
    height: 516px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leftWindow">
	<a href="notalink.html" id="infoButton">+ Information</a>
	<div id="info">Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product
	</div>
</div>

好吧，让我们假设@eithed 的假设是正确的，并且您想使用 CSS 类而不是 jQuery 来执行此操作。您也可以这样完成它(z-index 属性很重要，因为 opacity 不会从 DOM 中隐藏元素，因此没有它，您将无法单击 + Information 链接，因为 #info 元素将覆盖它):

$( document ).on('click', '#infoButton', function(e){
  e.preventDefault();
  $("#info").addClass('visible');
});

#info {
    opacity:0;
    background-color: rgba(255,255,255,.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 342px;
    height: 516px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    transition:all 1.5s;
    z-index:-1;
}
  #info.visible {
    opacity:1;
    z-index:10;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leftWindow">
	<a href="notalink.html" id="infoButton">+ Information</a>
	<div id="info">Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product
	</div>
</div>