弹性过渡。 平滑填充空间

Question

如何使柔韧性过渡平滑。 在我的示例中，当我单击.center时，它会突然跳跃。 当用户单击文档时，.right fadeOut和.center跳转以填充所有空间时，它甚至更加明显。 我可以使.center的运动更加平滑吗？ （类似于.right的fadeIn和fadeOut）

我不知道这可以用flex transition来完成吗？ 我尝试了一下，没有任何区别：过渡：全4；

 $(".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> 

Answer 1

您可以按照以下方法进行操作：

 $(".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> 

您遇到的问题是display无法转换，您需要将right元素的初始状态设置为宽度0和边距0。但是您可以在jQuery中设置这些属性。

Answer 2

为了获得预期的结果，请在下面的选项中使用不透明性，以权利和以弹性为基础过渡

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> 

Answer 3

您可以通过jquery代码中的addClass，removeClass在CSS中添加过渡

代码的Codepen链接

$(".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;
}