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

解決！

回答

相關問題