# 弹性过渡。 平滑填充空间

[英]Flex transition. Fill the space in a smooth way

` `\$(".center").click(function(e) { e.stopPropagation(); \$(".right").fadeIn(400); }); // click outside \$(document).click(function() { \$(".right").fadeOut(400); });` `
` `#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; }` `
` `<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>` `

` `\$(".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' }); });` `
` `#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; }` `
` `<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>` `

1. 在单击中心时，将不透明度1设置为右，并降低柔韧性为中心
2. 单击右侧时，将右侧的不透明度设置为0，将中心的柔韧性设置为100％

` `\$(".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%'); });` `
` `#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; }` `
` `<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>` `

``````\$(".center").click(function(e) {
e.stopPropagation();
});

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