Javascript 使用语义用户界面和同位素.js-项目在转换后抖动

我在Semantic UI框架中使用同位素.js时遇到了一些问题，如您所见，在任何转换之后，这些项都会“抖动”

我已经读了那个答案，但它对我没有帮助

提前谢谢

---

$（窗口）.load（函数（）{
//初始同位素
变量$container=$（'.同位素'）。同位素({
itemSelector:“.element项”，
布局模式：“砌体”，
getSortData：{
名称：'.name'，
编号：'.number parseInt'，
类别：“[数据类别]”
}
});
//绑定过滤器按钮单击
$（'#过滤器'）。在（'单击'，'按钮'，函数（）上）{
var filterValue=$（this.attr（'data-filter'）；
$container.同位素（{filter:filterValue}）；
});
//绑定排序按钮单击
$（'#排序'）。在（'单击'，'按钮'，函数（）上）{
var sortByValue=$（this.attr（'data-sort-by'）；
$container.同位素（{sortBy:sortByValue}）；
});
//在类按钮上选中更改
$（'.buttons'）。每个（函数（i，buttonGroup）{
变量$buttonGroup=$（buttonGroup）；
$buttonGroup.on（'click'，'button'，function（）{
$buttonGroup.find（'.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});
});

过滤
全部的
金属
过渡
诺布尔加斯
分类
原始顺序
喜欢
名称
A.

31类
最喜欢的
D

34像
最喜欢的
H

36像
最喜欢的
E

63像
最喜欢的
J

23像
最喜欢的
B

86类
最喜欢的
Z

45像
最喜欢的
我在使用Masoronal.js的语义UI卡时遇到了完全相同的问题。我开始胡思乱想，并通过删除css规则设法解决了这个问题：

.ui.cards > .card, .ui.card {
    transition: box-shadow 0.1s ease 0s, transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s;
}

希望有帮助
 Okonskan解决了这个问题

以下是已更正的原始代码段：


$（窗口）.load（函数（）{
//初始同位素
变量$container=$（'.同位素'）。同位素({
itemSelector:“.element项”，
布局模式：“砌体”，
getSortData：{
名称：'.name'，
编号：'.number parseInt'，
类别：“[数据类别]”
}
});
//绑定过滤器按钮单击
$（“#过滤器”）。在（'click'，'button'，function（）上{
var filterValue=$（this.attr（'data-filter'）；
$container.com({
过滤器：过滤器值
});
});
//绑定排序按钮单击
$（'#排序'）。在（'单击'，'按钮'，函数（）上）{
var sortByValue=$（this.attr（'data-sort-by'）；
$container.com({
sortBy:sortByValue
});
});
//在类按钮上选中更改
$（'.buttons'）。每个（函数（i，buttonGroup）{
变量$buttonGroup=$（buttonGroup）；
$buttonGroup.on（'click'，'button'，function（）{
$buttonGroup.find（'.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});
});
/*！
*#语义用户界面2.1.7-项目
* http://github.com/semantic-org/semantic-ui/
*
*
*版权所有2015贡献者
*根据麻省理工学院许可证发布
* http://opensource.org/licenses/MIT
*
*/
/*******************************
标准
*******************************/
/*--------------
卡片
---------------*/
.ui.cards>.card，
.ui.card{
最大宽度：100%；
位置：相对位置；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
宽度：290px；
最小高度：0px；
背景：#ffffff；