我设置了 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();
}
}
});
最佳答案
删除 overflow-x: hidden;
在 panel
类上。
然后将此添加到您的 css 中:
.form-control {
height: auto;
}
.dropdown-menu {
position: static;
}
关于jquery - Animate.css 和 Bootstrap-select 的 CSS 溢出问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29931910/