Comment puis-je faire la transition entre deux div sans voir l'arrière-plan de la page pendant la transition? Dans cet exemple, je me attends juste pour voir les chiffres changent:Transition d'opacité CSS, rendez-la vraiment linéaire
https://jsfiddle.net/j2td4hd7/15/
L'assouplissement de la transition est réglée sur linear.
Si vous avez deux éléments avec un fond noir et l'opacité de 50% sur chacun d'eux - ils sont pas combinés en 100% noir :)
Vérifiez les points suivants:
div {
background: black;
width: 150px;
height: 150px;
position: absolute;
}
div.half {
opacity: 0.5;
left: 0;
top: 0;
}
div.full {
top: 0;
left: 150px;
}<div class="half"></div>
<div class="half"></div>
<div class="full"></div>Je pense que ce qui suit fournira ce que vous cherchez:
window.swap = function(divId){
\t if(divId === 'div1'){
\t jQuery('#div1').css('zIndex', 1);
jQuery('#div2').css('zIndex', 2);
jQuery('#div2').fadeIn({easing: 'linear', complete: function() {
jQuery('#div1').fadeOut({easing: 'linear'})
} }
);
}else{
\t jQuery('#div2').css('zIndex', 1);
jQuery('#div1').css('zIndex', 2);
jQuery('#div1').fadeIn({easing: 'linear', complete: function() {
jQuery('#div2').fadeOut({easing: 'linear'})
}
});
}
}.block-div {
position: absolute;
height: 200px;
width: 400px;
color: #fff;
font-size: 40px;
text-align: center;
}
#div2{ display: none; background-color: brown; }
#div1{ background-color: red; }
html, body{
background-color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-div" onclick="swap('div1')" id="div1">1</div>
<div class="block-div" onclick="swap('div2')" id="div2">2</div>Note concernant les commentaires de l'OP:
Si vous voulez le même effet avec deux éléments qui a une hauteur différente, vous pouvez créer deux div divisible, un pour chaque div que vous avez. Le dummy1 aura la taille de div1, mais contiendra le bg de div2, et même pour dummy2. maintenant vous pouvez utiliser ces divs factices pour faire la transition.
Merci. Cela fonctionne très bien si les DIV sont de la même taille. Lorsque différentes tailles, il ne semble pas correct: https://jsfiddle.net/j2td4hd7/18/. – Adam
Qu'espérez-vous qu'il se passe dans un tel cas? – Dekel
Je voudrais que les deux DIVs fassent la transition en même temps, mais cela rend l'arrière-plan de la page visible. Le délai fonctionne, mais fait que le div le plus grand reste jusqu'à ce que le div le plus court soit complètement passé. Cela pourrait ne pas être possible. – Adam
Cela n'a rien à voir avec l'assouplissement, c'est que vous faites une transition inutile entre les deux éléments. Il est facile de trop compliquer cela - au lieu de penser aux deux images comme une pile: celle sur le fond peut rester visible tout le temps, seul celui sur le dessus a besoin de fondu avant et arrière.
Comparez ci-dessous:
goodswap = function() {
$('#div2').fadeToggle(); // transitions the top element in and out
}
badswap = function() {
$('#div1, #div2').fadeToggle(); // transitions both elements in and out
}.block-div {
position: absolute;
height: 200px;
width: 400px;
color: #fff;
font-size: 40px;
text-align: center;
}
.container { position: relative }
#div1 { background-color: red;}
#div2 { background-color: brown; display: none;}
#div3 { background-color: blue }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button onclick="goodswap()">Good fade</button>
<button onclick="badswap()">Bad fade</button>
<div class="container">
<div class="block-div" id="div3">(This is the page background)</div>
<div class="block-div" id="div1">1</div>
<div class="block-div" id="div2">2</div>
</div>Si les images sont de tailles différentes, cette technique fonctionne encore tant que la plus grande est empilée avec le z-index supérieur. Pour empêcher le reste de la page de sauter, réglez la taille du conteneur sur celle de l'image la plus grande.
goodswap = function() {
$('#div2').fadeToggle(); // transitions the top element in and out
}
badswap = function() {
$('#div1, #div2').fadeToggle(); // transitions both elements in and out
}.block-div {
position: absolute;
height: 200px;
width: 400px;
color: #fff;
font-size: 40px;
text-align: center;
}
.container { position: relative }
#div1 { background-color: red;}
#div2 { background-color: brown; width: 500px; display: none;}
#div3 { background-color: blue }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button onclick="goodswap()">Good fade</button>
<button onclick="badswap()">Bad fade</button>
<div class="container">
<div class="block-div" id="div3">(This is the page background)</div>
<div class="block-div" id="div1">1</div>
<div class="block-div" id="div2">2</div>
</div>
questions visant à obtenir l'aide de débogage ("** pourquoi est-ce pas le code de travail? **") doivent inclure le comportement souhaité, un problème spécifique * ou erreur * et * le code le plus court nécessaire * de le reproduire ** dans la question elle-même **. Les questions sans ** un énoncé de problème clair ** ne sont pas utiles aux autres lecteurs. Voir: [Comment créer un exemple minimal, complet et vérifiable] (https://stackoverflow.com/help/mcve). – Andreas
Pouvez-vous envelopper le contenu dans un div ou span et la transition que l'ensemble de la div? –
Je pourrais utiliser des fonds différents dans le futur. C'était juste un exemple minimal.Voici un avec différents milieux: https://jsfiddle.net/j2td4hd7/15/. Pourquoi l'arrière-plan de la page s'affiche-t-il pendant la transition? Merci – Adam