javascript - Angular animate 的 classNameFilter 与 Angular-bootstrap

Question

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

在 0.12.* 中，Angular-Bootstrap 没有使用 ngAnimate。因此，我能够使用 $animateProvider.classNameFilter(/animate/) 以及 Angular-bootstrap 中的所有内容正确进行动画处理。

现在我正在迁移到更新的 Angular 和 Bootstrap 版本。更改库文件后， Accordion 和折叠停止工作。我发现上述函数导致了我的问题: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 。缺点:保持 HTML 浅薄，也就是确保过去携带 animate 的元素类不会嵌套在其类/可见性会更改的父 div 中，因为 data-ng-animate应用于最顶层元素和内部函数 areAnimationsAllowed (angular-animate.js) 将阻止任何子项的动画。

PS。我希望 Angular-Bootstrap 提供某种配置以更好地与 classNameFilter 配合使用.