CSS溢出的问题，我已经AngularJS，引导和Animate.css成立这样当我点击一个面板头，身体幻灯片英寸与Animate.css和Bootstrap选

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

然而，这导致我使用的.panel-body DIV下拉插件被切断（西尔维奥Moreto的优秀bootstrap-select plugin使用an AngularJS directive实现）。

见下文：

enter image description here

这里有一个plunker这样你就可以查看代码，看看自己：

dAP9OqFI0h95qtC56FTE?p=preview

如果我使用一个普通<select>代替插件，它工作正常。

下拉插件添加了标记，我认为这是在div的overflow-x规则的摆布......因此导致问题。

反正我可以修改我的标记/ CSS允许选择当面板的下拉菜单“突围”？

优选地，我想避免修改插件的CSS。

感谢您的帮助！ :)

编辑： 为了澄清，这是影响我想：http://i.imgur.com/WMluRjg.png :)

解决！

我以前接受的答案，在这里我使用ngAnimate的beforeRemoveClass方法来隐藏溢出立即“NG隐藏”类被删除之前的变化，然后将其添加回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(); 
     } 
    } 
});

来源

2015-04-28 Andrew

@ humble.rumble.6x3首先，感谢您的答复！ :)我还没有尝试过，但我希望避免使用Javascript（特别是基于事件的JS），如果可能的话......如果我无法用CSS实现它，我会考虑一个JS替代方案。 – Andrew

最好的方法是创建一个Javascript animation in Angular。

您可以在jQuery中定义动画，并在动画发生前后添加/删除适当的CSS规则。下面是使用不透明的例子动画：

myModule.animation('.js-slide', function() { 
    return { 
    enter : function(element, done) { 

     // Hide the overflow before the animation starts 
     $('.panel').css('overflow', 'hidden'); 

     // Perform the animation with jQuery 
     element.css('opacity',0); 
     jQuery(element).animate({ 
     opacity: 1 
     }, 500, function() { 

     // Show the overflow after the animation completes 
     $('.panel').css('overflow', 'visible'); 
     done(); 

     }); 

    }, 
    } 
});

然后使用本示例动画中，HTML应该是这样的：

<div ng-if="panelBodyVisible" class="panel-body js-slide"></div>

来源

2015-04-29 00:17:19

感谢您的帮助:)这实际上是我正在考虑做的事情（请参阅上面罗宾的回答中的问题），但理想情况下我正在寻找纯粹的CSS解决方案。我会告诉你，如果我不得不诉诸这一点，我会接受:) – Andrew

@Andrew我推荐这个，现在你澄清你想要什么。由于溢出问题，很难仅依赖于CSS。 –

@bcole我使用了您的解决方案的变体，一切都很好！在原文中查看我的编辑。 – Andrew

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

然后在你的CSS内容加入到这样的：我能想到的要做到这一点

.form-control { 
    height: auto; 
} 

.dropdown-menu { 
    position: static; 
}

enter image description here

来源

2015-04-29 00:14:38

我喜欢这个答案比我发布的更好，[我测试了它，它甚至可以在'overflow-x：hidden;'属性仍然可用的情况下运行]（http://plnkr.co/edit/SILBZK73WhNjcpSUtmZw?p=预习）。 –

谢谢！大多数情况下，代码越小越好 –

@RobinCarloCatacutan感谢您的回复！ :)这是非常接近，但这是我正在寻找的效果：[http://i.imgur.com/WMluRjg.png](http://i.imgur.com/WMluRjg.png）.. 。[这里是相应的Plunker]（http://plnkr.co/edit/xcidypJKHdyo1Xd4vNU8?p=preview）。我与这个Plunker的问题是动画不包含在面板中（它从外面开始）。 – Andrew

与Animate.css和Bootstrap选

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

解决！

回答

相关问题