Javascript 如何在包含对齐内容的容器中设置插入和移除动画？

使用flexbox

justify content

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

到目前为止，我只对元素的高度设置了动画。但是，在动画结束时会有一个跳跃，因为被动画设置为

height:0

的已移除元素周围的间隙会消失。类似地，插入元素时，动画的开头会有一个跳跃

---

是否可以使用

调整内容

从端到端制作动画？这是用来玩的。使用CSS转换是首选。

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

在执行

card.remove（）

的同一瞬间，flexbox

justify content

属性需要调整移除元素周围的间隙（如您所说）。而且，正如保利D所指出的那样，没有什么可以动画化的

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

在这里，我留下一个片段：

var动画时间=500；
var column_height=$（'.column'）.height（）；
var cards_height=$（'.card'）.height（）；
var卡号；
var卡总高度；
变量空间要分布；
变量占位符_高度；
函数更新（卡片编号）
{
卡片总高度=卡片数量*卡片高度；
空间分布=列高度-卡片总高度；
占位符高度=要分配的空间/（卡片编号+1）；
}
更新（$（'.card'）.length）；
$（'.placeholder'）.height（placeholder_height）；
$（文档）.on（'click'，'card'，函数（）{
var卡=$（此）；
动画（{高度：0，不透明度：0}，动画时间，函数（）{
卡。移除（）；
});
更新（$（'.card'）。长度-1）；
var占位符=card.next（）；
$（'.placeholder'）.not（placeholder）.animate（{height:placeholder\u height}，animation\u time）；
占位符.动画（{height:0}，动画时间，函数（）{
占位符.remove（）；
更新（$（'.card'）.length）；
$（'.placeholder'）.animate（{height:placeholder\u height}，animation\u time）；
});
});
$（'a'）。单击（函数（）{
var卡=$（''）；
css（{不透明度：0，高度：0}）
.appendTo（“.column”）
.animate（{高度：25，不透明度：1}，动画时间）；
变量占位符=$（''）；
css（{height:0}）
.appendTo（“.column”）；
更新（$（'.card'）.length）；
$（'.placeholder'）.animate（{height:placeholder\u height}，animation\u time）；
});
body，html，.column{
身高：100%；
保证金：0；
}
.栏目{
浮动：左；
宽度：100px；
背景：海军；
溢出：隐藏；
}
.card{
高度：25px；
宽度：100px；
背景：灰色；
}
.占位符{
高度：25px；
宽度：100px；
}
主要问题是，您得到的行为是预期的行为

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

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

在这里，我留下一个片段：


var动画时间=500；
var column_height=$（'.column'）.height（）；
var cards_height=$（'.card'）.height（）；
var卡号；
var卡总高度；
变量空间要分布；
变量占位符_高度；
函数更新（卡片编号）
{
卡片总高度=卡片数量*卡片高度；
空间分布=列高度-卡片总高度；
占位符高度=要分配的空间/（卡片编号+1）；
}
更新（$（'.card'）.length）；
$（'.placeholder'）.height（placeholder_height）；
$（文档）.on（'click'，'card'，函数（）{
var卡=$（此）；
动画（{高度：0，不透明度：0}，动画时间，函数（）{
卡。移除（）；
});
更新（$（'.card'）。长度-1）；
var占位符=card.next（）；
$（'.placeholder'）.not（placeholder）.animate（{height:placeholder\u height}，animation\u time）；
占位符.动画（{height:0}，动画时间，函数（）{
占位符.remove（）；
更新（$（'.card'）.length）；
$（'.placeholder'）.animate（{height:placeholder\u height}，animation\u time）；
});
});
$（'a'）。单击（函数（）{
var卡=$（''）；
css（{不透明度：0，高度：0}）
.appendTo（“.column”）
.animate（{高度：25，不透明度：1}，动画时间）；
变量占位符=$（''）；
css（{height:0}）
.appendTo（“.column”）；
更新（$（'.card'）.length）；
$（'.placeholder'）.animate（{height:placeholder\u height}，animation\u time）；
});
body，html，.column{
身高：100%；
保证金：0；
}
.栏目{
浮动：左；
宽度：100px；
背景：海军；
溢出：隐藏；
}
.card{
高度：25px；
宽度：100px；
背景：灰色；
}
.占位符{
高度：25px；
宽度：100px；
}

基本上。。。否。没有要设置动画的起始值和结束值。这只是开或关，我不是想关房子。我想顺利地添加和删除元素。嗯……坦白说，我很怀疑。可能需要对规范进行一些深入研究，以了解哪些部分实际上是可设置动画的，但感觉这不是一个容易解决的问题。基本上。。。否。没有要设置动画的起始值和结束值。这只是开或关，我不是想关房子。我想顺利地添加和删除元素。嗯……坦白说，我很怀疑。这可能需要深入研究这个问题