带angular-bootstrap的Angular动画classNameFilter

Question

首先，我必须在我的应用程序中使用$animateProvider.classNameFilter()。它加快了一切。

在0.12.* angular-bootstrap中没有使用ngAnimate。所以我能够使用$animateProvider.classNameFilter(/animate/)和所有从angular-bootstrap到动画的东西。

现在我正在迁移到更新的Angular和Bootstrap版本。更改库文件后，折叠和折叠停止工作。我发现上面的函数导致了我的问题：http://plnkr.co/edit/uGjQzKCy6hrj0V8MVBxD?p=preview (在example.js中注释/取消注释第4行)。

我能做些什么来正确使用这个函数？正则表达式应该是什么样子来覆盖ngAnimate和angular-bootstrap中的所有动画？

Answer 1

选项1-将animate类添加到您想要使用angular-bootstrap设置动画的每个元素。使用旋转木马的示例

<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。缺点:保持你的超文本标记语言浅层，也就是确保用来承载animate类的元素不会嵌套在类/可见性将会改变的父div中，因为data-ng-animate被应用于最上面的元素，并且内部函数areAnimationsAllowed (angular-animate.js)将阻止任何孩子的动画。

PS。我希望angular-bootstrap提供某种配置，以便更好地与classNameFilter一起工作。