具有“溢出：隐藏”父项的MixItUp动画

Question

I have problems with the MixItUp jQuery addon

When I initialize a MixItUp container inside a overflow: hidden parent, I have animation problems on init and filtering.

With overflow: hidden there is another animation effect like this

You can see an example on this fiddle

When you remove the overflow: hidden in the jsfiddle example, it is working as expected.

In my project, the MixItUp is inside the iDangerous swiper, so I can't remove the 'oveflow: hidden', because it is necessary.

Is there a way to solve this problem, with css or script?

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

});

Answer 1

Solved.

Solution: Set a height to the #Container