Блог

У меня есть веб-приложение angular, когда оно загружает список «Заметок» в вызываемый массив областей notes .

Этот список фильтруется примерно ng-repeat так:

 <div class="noteClass" ng-repeat="n in notes | propertyFilter: 'Fields.noteTabNumber' : selectedTab">
  

Все это работает нормально, и я добавил несколько CSS-анимаций в свой CSS-файл, чтобы при добавлении нового элемента в notes массив он анимировался в сцене.

 div.noteClass.ng-enter,
div.noteClass.ng-leave,
div.noteClass.ng-move {
    //my animations here
}

div.noteClass.ng-enter,
div.noteClass.ng-move
 {
    //my further animation functions
}

div.noteClass.ng-enter.ng-enter-active,
div.noteClass.ng-move.ng-move-active {
    /// finished animations
}
  

Моя проблема связана с фильтром, как вы можете видеть, список фильтруется с помощью настраиваемого фильтра, propertyFitler который фильтрует заметки, основываясь на том, какую вкладку выбрал пользователь.

Что является простым UL :

 <ul>
    <li ng-class="{selected: selectedTab==1}">...</li>
    <li ng-class="{selected: selectedTab==2}">...</li>
    <li ng-class="{selected: selectedTab==3}">...</li>
</ul>
  

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

Как я могу анимировать новый элемент в списке, но когда пользователь фильтрует список по LI элементу, не анимируйте изменения в списке?

Вы можете внедрить $animate службу в свой контроллер, тогда сначала должен быть вызван любой обратный вызов, который у вас есть для нажатия на вкладку $animate.enabled(false) . Это отключит анимацию. Затем просто вызовите $animate.enabled(true) , как только страница обновится. Знание того, когда снова включить анимацию, может быть сложной частью. Проще всего просто $timeout отключить анимацию на полсекунды или около того. Если вам это не нравится, есть несколько сообщений в блоге о разработке when ngRepeat завершает свою работу. Или, возможно, есть действительно очевидное и чистое решение, которое я не рассматривал.