1

Я начну с того, что я должен использовать $animateProvider.classNameFilter() в своем приложении. Это ускоряет все.Угловой анимированный классNameFilter с угловым бутстрапом

В 0.12. * Угловой-бутстрап не использовал ngAnimate. Таким образом, я смог использовать $animateProvider.classNameFilter(/animate/) и все, начиная с углового бутстрапа, анимированного.

Теперь я перехожу на новую версию Angular и Bootstrap. После изменения файлов библиотеки аккордеон и сбой перестали работать. Я обнаружил, что выше функция вызвала мою проблему: http://plnkr.co/edit/uGjQzKCy6hrj0V8MVBxD?p=preview (комментарий/раскомментация строки 4 в example.js).

Что я могу сделать, чтобы правильно использовать эту функцию? Как выглядит регулярное выражение для охвата всех анимаций из ngAnimate и углового бутстрапа?

ответ

0

ВАРИАНТ 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 неглубокий, AKA убедитесь, что элементы, которые использовали для переноса класса animate, не вложены в родительский div, чей класс/видимость изменится, потому что data-ng-animate применяется к самому верхнему элементу и внутренней функции areAnimationsAllowed (угло-одинарный. js) предотвратит анимацию любых детей.

PS. Я хочу, чтобы угловой бутстрап обеспечивал некоторую конфигурацию, чтобы лучше работать с classNameFilter.

Смежные вопросы