La transition ne fonctionne pas correctement avec rgba

Question

J'ai ici un projet dans lequel je veux qu'une superposition apparaisse sur une image lorsque vous cliquez sur un lien pour que nous puissions lire quelques informations sur un produit. L'effet Je cherche quelque chose comme ceci:

Pour ce faire, j'ai un div avec l'information et un fond blanc à l'intérieur du div qui a l'image, comme ceci:

 <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> 

la div avec l'info a une classe de « notVisible » et j'ai une autre classe qui a une opacité de 0,7, comme suit:

#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; 
} 

Lorsque vous c lèchent sur le lien, javascript permute les classes:

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

}); 

Cela fonctionne, mais le problème est que le texte perd aussi l'opacité que je ne veux pas. Pour résoudre ce problème, je l'utilise rgba au lieu de l'opacité, comme ceci:

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; 
} 

Et je reçois le comportement bogué vous pouvez voir dans le gif. Toute aide appréciée. Merci

Answer 1

Actuellement, ce que vous faites est juste d'atténuer la couleur de fond. Le texte serait visible à tout moment en utilisant cette approche. Si vous voulez qu'il ressemble à votre premier gif, vous devez simplement définir l'opacité d'arrière-plan à .7 pour commencer et masquer l'élément entier #info. Ensuite, vous pouvez utiliser jQuery pour fondre l'élément entier en cliquant.

$(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"> 
 
\t <a href="notalink.html" id="infoButton">+ Information</a> 
 
\t <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 
 
\t </div> 
 
</div>

Bon, supposons que @eithed est correcte dans leur prise en charge et que vous voulez faire avec une classe CSS plutôt que jQuery. Vous pouvez également l'accomplir comme ceci (la propriété z-index est importante car opacity ne cache pas l'élément du DOM, donc sans lui, vous ne pourriez pas cliquer sur le lien + Information car l'élément #info le couvrirait):

$(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"> 
 
\t <a href="notalink.html" id="infoButton">+ Information</a> 
 
\t <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 
 
\t </div> 
 
</div>