остановить анимацию в angularjs при фильтрации ng-repeat

У меня есть угловое веб-приложение, когда загружается список «Заметок» в массив области видимости с именем 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, не анимировать изменение в списке?


javascript html angularjs ng-animate
person Mark    schedule 20.06.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

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

person dave walker    schedule 20.06.2014
comment
так как бы я использовал это точно? Нужно ли мне устанавливать noAnimate = true, когда пользователь щелкает элемент списка, а затем изменять свойство selectedTab? Я не слишком знаком с сервисными декораторами... - person Mark; 20.06.2014
comment
Хорошо, отмени мой последний. Новый ответ намного проще. - person dave walker; 20.06.2014
comment
это, казалось, помогло, к сожалению, мне пришлось добавить тайм-аут, что немного взломано, но работает в моем случае - person Mark; 03.07.2014