使用 flexbox justify-content 属性，元素可以均匀分布在其容器中。但是，我想在插入新元素或删除现有元素时为它们的位置设置动画。
到目前为止，我只设法对元素的高度进行动画处理。但是，由于被动画化为 height: 0 的已删除元素周围的间隙消失，因此动画结束时会发生跳跃。类似地，当插入元素时，动画的开头会有一个跳转。
是否可以使用 justify-content 制作从头到尾的动画？这是an example和玩。首选使用 CSS 过渡。
最佳答案
主要问题是您得到的行为是预期的。
在执行 card.remove() 的同一时刻，flexbox justify-content 属性需要调整被删除元素周围的间隙(如您所说) 。而且，正如 Paulie D 所指出的那样，没有什么可以动画化的。
我能想到的唯一解决方案是跳过 flex 事情并使用 JavaScript 在 card 元素之间创建必要的间隙。
这里我留下片段:
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>希望对你有帮助!
编辑 - 我在代码中进行了以下更改:
- 我将 fiddle 更改为 SO 片段。
- 我在动画结束时强制更新元素大小(如果您在最后一个元素完全删除之前点击删除某个元素)
- 我更改了元素的大小以使其适应(小)SO 片段窗口。
关于javascript - 如何使用 justify-content 对容器中的插入和删除进行动画处理？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32167909/