Mixitup响应Div高度

Question

我正在尝试使用mixitup插件选择我的类别时使我的容器平稳过渡。选择其他类别时，我不希望我的容器高度会突然移动。任何人都知道如何使用css3动画或jquery使高度平滑调整大小？

我仍然是编码的初学者，我不确定如何使用jQuery。

以下是我网站www.andrewnl.com/workshop上的工作版本。您还可以在切换类别时看到我的容器捕捉。

        <div class="row">
        <div class="container-mixitup">
            <ul class="clearfix" id="filters">
                <li class="mix"><span data-filter="app card icon logo web" class="filter active">All</span></li>
                <li class="mix"><span data-filter="app" class="filter">App</span></li>
                <li class="mix"><span data-filter="card" class="filter">Card</span></li>
                <li class="mix"><span data-filter="icon" class="filter">Icon</span></li>
                <li class="mix"><span data-filter="logo" class="filter">Logo</span></li>
                <li class="mix"><span data-filter="web" class="filter">Web</span></li>
            </ul>
            <div id="portfoliolist" class="portfolio">
                <div data-cat="logo" class="portfolio logo mix_all">
                    <div class="portfolio-wrapper">             
                        <img alt="" src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/5.jpg" style="top: 0px;">
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Bird Document</a>
                                <span class="text-category">Logo</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </div>
                </div>              
                <div data-cat="app" class="portfolio app mix_all">
                    <div class="portfolio-wrapper">         
                        <img alt="" src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/1.jpg" style="top: 0px;">
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Visual Infography</a>
                                <span class="text-category">APP</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </div>
                </div>              
                <div data-cat="web" class="portfolio web mix_all">
                    <div class="portfolio-wrapper">                     
                        <img alt="" src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/4.jpg">
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Sonor's Design</a>
                                <span class="text-category">Web design</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </div>
                </div>              
                <div data-cat="card" class="portfolio card mix_all">
                    <div class="portfolio-wrapper">         
                        <img alt="" src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/1.jpg">
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Typography Company</a>
                                <span class="text-category">Business card</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </div>
                </div>      
            </div>
        </div>
    </div>