jquery - Animate.css 和 Bootstrap-select 的 CSS 溢出问题

Question

我设置了 AngularJS、Bootstrap 和 Animate.css，这样当我点击面板标题时，主体就会滑入。

为了让动画包含在面板中，我添加了 overflow-x: hidden到 .panel类。

但是，这会导致我在 .panel-body 中使用的下拉插件div 被截断(Silvio Moreto 的优秀 bootstrap-select plugin 使用 an AngularJS directive 实现)。

见下文:

这是一个 plunker，因此您可以查看代码并亲自查看:

http://plnkr.co/edit/dAP9OqFI0h95qtC56FTE?p=preview

如果我使用常规 <select>而不是插件，它工作正常。

下拉插件添加了标记，我认为这取决于 overflow-x .panel 的规则div... 因此导致了问题。

无论如何我都可以修改我的标记/CSS 以允许下拉菜单在被选中时“脱离”面板吗？

我最好避免修改插件的 CSS。

感谢您的帮助! :)

编辑:澄清一下，这是我想要的效果:http://i.imgur.com/WMluRjg.png :)

---

已解决!

我使用了已接受答案的变体，其中我使用了 ngAnimate 的 beforeRemoveClass在删除“ng-hide”类之前立即 overflow hidden 的方法，然后在 css 动画完成后将其添加回来:

app.animation('.slide', function() {

    return {

        removeClass: function(element, className, doneFn) {

                var duration = 0.3;

                element.css('-webkit-animation', 'slideInRight '+(duration)+'s')
                       .css('-moz-animation', 'slideInRight '+(duration)+'s')
                       .css('-o-animation', 'slideInRight '+(duration)+'s')
                       .css('animation', 'slideInRight '+(duration)+'s');

                // After the css animation has completed, allow overflow on the parent panel again.
                setTimeout(function(){
                    element.closest('.panel').removeClass('no-overflow');
                }, (duration * 1000));

                doneFn();
        },

        beforeRemoveClass: function(element, className, doneFn){

            // Prevent overflow on closest panel
            element.closest('.panel').addClass('no-overflow');

            doneFn();
        }
    }
});

Answer 1

删除 overflow-x: hidden; 在 panel 类上。

然后将此添加到您的 css 中:

.form-control {
  height: auto;
}

.dropdown-menu {
  position: static;
}