当我在overflow: hidden
父级内部初始化MixItUp容器时,我在init和过滤时遇到了动画问题。
使用overflow: hidden
还有另一种动画效果,例如this
您可以在此fiddle
上查看示例当你删除jsfiddle示例中的overflow: hidden
时,它正在按预期工作。
在我的项目中,MixItUp位于iDangerous swiper内部,因此我无法移除' oveflow:hidden',因为它是必要的。
有没有办法用css或脚本解决这个问题?
HTML:
<div id="Container">
<div id="Container2">
<div class="mix"></div>
<div class="mix"></div>
<div class="mix"></div>
<div class="mix"></div>
</div>
</div>
<div class="filter" data-filter="all">All</div>
<div class="filter" data-filter="none">None</div>
CSS:
#Container {
overflow: hidden;
}
.mix {
background: black;
display: none;
width: 100px;
height: 100px;
}
使用Javascript:
$(function () {
$('#Container').mixItUp({
animation: {
effects: 'fade translateZ(-360px) stagger(34ms)'
}
});
});
答案 0 :(得分:0)
解决。
解决方案: 将高度设置为#Container