Angular animate的classNameFilter with angular-bootstrap

我將開始在我的應用程序中使用$animateProvider.classNameFilter()。它加速了一切。Angular animate的classNameFilter with angular-bootstrap

在0.12。* angular-bootstrap中沒有使用ngAnimate。所以我能夠使用$animateProvider.classNameFilter(/animate/)和角度自舉動畫正確的一切。

現在我正在遷移到更新的Angular和Bootstrap版本。更改庫文件後，手風琴和崩潰停止工作。我發現上面的函數引起了我的問題：http://plnkr.co/edit/uGjQzKCy6hrj0V8MVBxD?p=preview（在example.js中註釋/取消註釋第4行）。

如何正確使用此功能？正則表達式應該如何涵蓋ngAnimate和angular-bootstrap的所有動畫？

來源

2015-09-14 michalv

選項1 - 將animate類添加到要用角引導程序進行動畫處理的每個元素。例如使用傳送帶

<div uib-carousel active="active" interval="-1" no-wrap="true"> 
    <div uib-slide class="animate" index="0"> 
    <img src="http://nick.mtvnimages.com/nick/video/images/nick/spongebob-050-full-episode-16x9.jpg" style="width:100%"> 
    <div class="carousel-caption"> 
     <h4>Custom slide 1!!</h4> 
    </div> 
    </div> 
    <div uib-slide class="animate" index="1"> 
    <img src="http://nick.mtvnimages.com/nick/video/images/nick/spongebob-050-full-episode-16x9.jpg" style="width:100%"> 
    <div class="carousel-caption"> 
     <h4>Custom slide 2!!</h4> 
    </div> 
    </div> 
    <div uib-slide class="animate" index="2"> 
    <img src="http://nick.mtvnimages.com/nick/video/images/nick/spongebob-050-full-episode-16x9.jpg" style="width:100%"> 
    <div class="carousel-caption"> 
     <h4>Custom slide 3!!</h4> 
    </div> 
    </div> 
</div>

選擇2 - 不叫classNameFilter。缺點：保持HTML淺，又確保用於攜帶animate類的元素不嵌套在類/可見性將改變的父div中，因爲data-ng-animate應用於最頂層元素和內部函數areAnimationsAllowed（角動畫。 js）會阻止任何孩子的動畫。

PS。我希望angular-bootstrap提供了某種配置，可以更好地與classNameFilter配合使用。

來源

2017-08-16 20:04:09 miktemk

Angular animate的classNameFilter with angular-bootstrap

回答

相關問題