Comment rendre la transition flexible en douceur. Dans mon exemple, lorsque je clique sur .center, il saute de manière abrupte. C'est encore plus visible lorsque l'utilisateur clique sur le document, .right fadeOut et .center saute pour remplir tout l'espace. Puis-je rendre ces mouvements de .center plus fluides? (similaire à fadeIn et fadeOut de .right)
Je ne sais pas si cela peut être fait avec une transition flex? J'ai essayé et ne fait aucune différence: transition: all 4s;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div id="wrap"> <div class="row"> <div class="center">center</div> <div class="right">right</div> </div> <div class="row"> <div class="center">center</div> <div class="right">right</div> </div> </div>
#wrap {
position: relative;
margin: 20px auto;
width: 80%;
background-color: red;
}
.row {
position: relative;
height: 30px;
margin-bottom: 10px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: lightgray;
}
.center {
min-height: 30px; line-height: 30px;
text-align: center;
background-color: blue;
flex-grow: 1;
}
.right {
width: 50px; height: 30px; line-height: 30px;
display: inline-block;
text-align: center;
margin-left: 10px;
background-color: grey;
display:none;
}
$(".center").click(function(e) {
e.stopPropagation();
$(".right").fadeIn(400);
});
// click outside
$(document).click(function() {
$(".right").fadeOut(400);
});
3 Réponses :
Voici comment procéder:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="wrap">
<div class="row">
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="row">
<div class="center">center</div>
<div class="right">right</div>
</div>
</div>
#wrap {
position: relative;
margin: 20px auto;
width: 80%;
background-color: red;
}
.row {
position: relative;
height: 30px;
margin-bottom: 10px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: lightgray;
}
.center {
min-height: 30px;
line-height: 30px;
text-align: center;
background-color: blue;
flex-grow: 1;
}
.right {
width: 0;
margin-left: 0;
height: 30px;
line-height: 30px;
text-align: center;
background-color: grey;
transition: all .4s ease;
overflow: hidden;
}
$(".center").click(function(e) {
e.stopPropagation();
$(".right").fadeIn(400).css({
'width': '50px',
'margin-left': '10px'
});
});
// click outside
$(document).click(function() {
$(".right").fadeOut(400).css({
'width': '0',
'margin-left': '0'
});
});
Le problème que vous avez est que l ' affichage ne peut pas être transféré et vous devez avoir l'état initial de l'élément right avec une largeur de 0 et un marge de 0. Vous pouvez cependant définir ces propriétés dans jQuery.
Vous pouvez ajouter une transition en CSS via addClass, removeClass dans le code jquery
$(".center").click(function(e) {
e.stopPropagation();
$(".right").addClass('show');
});
// click outside
$(document).click(function() {
$(".right").removeClass('show');
});
.right {
width: 50px; height: 30px; line-height: 30px;
display: inline-block;
text-align: center;
margin-left: 10px;
background-color: grey;
opacity: 0;
visibility: none;
transition: all 0.5s;
background-color: lightgray;
}
.right.show {
opacity: 1;
visibility: visible;
}
Si je comprends bien, dans votre solution .center ne bouge pas, il ne fléchit pas. Vous rendez .right visible ou non visible. Cela semble une solution intéressante mais c'est différent de ce que je demandais
Pour obtenir le résultat attendu, utilisez l'option ci-dessous pour utiliser l'opacité pour la droite et la transition avec une base flexible
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div id="wrap"> <div class="row"> <div class="center">center</div> <div class="right">right</div> </div> <div class="row"> <div class="center">center</div> <div class="right">right</div> </div> </div>
#wrap {
position: relative;
margin: 20px auto;
width: 80%;
background-color: red;
}
.row {
position: relative;
height: 30px;
margin-bottom: 10px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: lightgray;
}
.center {
line-height: 30px;
text-align: center;
background-color: blue;
flex: 0 0 100%;
transition: all 1s;
}
.right {
width: 50px; height: 30px; line-height: 30px;
display: inline-block;
text-align: center;
margin-left: 10px;
background-color: grey;
flex: 0 0 0px;
opacity: 0;
transition: all 1s;
}
$(".center").click(function(e) {
e.stopPropagation();
$(".right").css('opacity', '1');
$(".right").css('flex', '0 0 50px');
$('.center').css('flex', '0 0 calc(100% - 60px)');
});
// click outside
$(document).click(function() {
$(".right").css('opacity', '0');
$(".right").css('flex', '0 0 0px)');
$('.center').css('flex', '0 0 100%');
});
J'aime beaucoup votre solution. Beaux mouvements fluides. Merci beaucoup. J'ai appris de nouvelles choses. Je pense que je dois accepter la réponse @disinfor simplement parce qu'elle est arrivée en premier quelques minutes avant
Non, ce n'est pas facilement possible, du moins sans utiliser cette approche. fadeIn / fadeOut manipule l'opacité de l'élément, et bascule entre display block / none - et ce dernier est instantané, non transposable. Vous devriez opter pour une solution complètement différente, une qui a les deux colonnes affichées pour commencer, une avec une largeur effective initiale de 0, puis animer la largeur pour les deux en même temps… ou quelque chose de similaire.
Pour la première partie de ce que 04FS décrit, vous pouvez essayer avec le
basculede jQuery. Citant les documents , "Lorsqu'une durée, un objet simple ou une seule fonction" complète "est à condition que .toggle () devienne une méthode d'animation "