如何使用 justify-content 为容器中的插入和删除设置动画？

How to animate inserts and removes in a container with justify-content?

使用 flexbox justify-content 属性，元素可以均匀分布在它们的容器中。但是，我想在插入新元素或删除现有元素时为它们的位置设置动画。

到目前为止，我只成功地设置了元素高度的动画。但是，动画末尾有一个跳转，因为动画到 height: 0 的已移除元素周围的间隙消失了。类似地，当插入一个元素时，在动画的开头有一个跳跃。

是否可以用justify-content从头到尾制作一个动画？这是 an example 可以玩的。首选使用 CSS 转换。

主要问题是您得到的行为是预期的行为。

在执行 card.remove() 的同一时刻，flexbox justify-content 属性 需要调整已删除元素周围的间隙（如您所说）。而且，正如 Paulie D 所指出的，没有什么可以动画化的。

我能想到的唯一解决方案是跳过 flex 并使用 javascript 在 card[= 之间创建必要的间隙40=]个元素。

我在这里留下片段：

var animation_time = 500;
var column_height = $('.column').height();
var cards_height = $('.card').height();

var cards_number;
var cards_total_height;
var space_to_be_distributed;
var placeholder_height;

function updateSizes(cards_number)
{
    cards_total_height = cards_number * cards_height;
    space_to_be_distributed = column_height - cards_total_height;
    placeholder_height = space_to_be_distributed / (cards_number + 1);
}

updateSizes($('.card').length);

$('.placeholder').height(placeholder_height);

$(document).on('click', '.card', function () {
    var card = $(this);
    card.animate({height: 0, opacity: 0}, animation_time, function () {
     card.remove(); 
    });
    updateSizes($('.card').length - 1);
    var placeholder  = card.next();
    $('.placeholder').not(placeholder).animate({height: placeholder_height}, animation_time);
    placeholder.animate({height: 0}, animation_time, function () {
     placeholder.remove();
        updateSizes($('.card').length);
        $('.placeholder').animate({height: placeholder_height}, animation_time);
    });
});

$('a').click(function () {
    var card = $('<div class="card">');
    card.css({opacity: 0, height: 0})
        .appendTo('.column')
        .animate({height: 25, opacity: 1}, animation_time);        
 var placeholder = $('<div class="placeholder">');
    placeholder.css({height: 0})
     .appendTo('.column');
    updateSizes($('.card').length);
    $('.placeholder').animate({height: placeholder_height}, animation_time);
});

body, html, .column {
    height: 100%;
    margin: 0;
}

.column {
    float: left;
    width: 100px;
    background: navy;
    overflow: hidden;
}

.card {   
    height: 25px;
    width: 100px;
    background: grey;
}
.placeholder {   
    height: 25px;
    width: 100px;
}

<html>
<head>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<div class="column">
    <div class="placeholder"></div>
    <div class="card"></div>
    <div class="placeholder"></div>
    <div class="card"></div>
    <div class="placeholder"></div>
    <div class="card"></div>
    <div class="placeholder"></div>
</div>
<a href="#">Add card</a>
</body>
</html>

希望对您有所帮助！

编辑 - 我对代码进行了以下更改：

  • 我更改了 SO 代码段的 fiddle。
  • 我在动画结束时强制更新了元素大小（以防您在最后一个元素被完全移除之前单击以移除一个元素）
  • 我更改元素的大小以适应（小）SO 片段 window。