Question

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

到目前为止，我只设法动画元素的高度。但是，动画结束时会有一个跳跃，因为被移动的元素周围的间隙被动画化为height: 0消失了。类似地，当插入元素时，动画开始时会跳转。

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

Answer 1

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

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

我能想到的唯一解决方案是跳过 flex 并使用javascript在卡元素之间创建必要的空白。

这里我留下片段：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望它有所帮助！

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

我改变了SO片段的小提琴。
我强制更新动画结尾处的元素大小（如果您在最后一个元素完全删除之前单击删除元素）
我更改了元素的大小以使其适应（小）SO片段窗口。

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

1 个答案: