AngularJS 1.2 ng-repeat анимация при загрузке страницы

Потрясающая анимация - это здорово! Но я не могу заставить его работать без взаимодействия с пользователем.

Существует полный нормальный список ng-repeat:

<div ng-controller="controller">    
    <div class="category" ng-repeat="category in categories">
      {{category}}
    </div>
</div>

Определено в контроллере:

var controller = function($scope) {
  $scope.categories = ['12345', '6789', '9876', '54321'];
};

И несколько правил CSS для анимации:

.category.ng-enter {
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
  opacity:0;
}
.category.ng-enter-stagger {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}
.category.ng-enter.ng-enter-active {
  /* standard transition styles */
  opacity:1;
}

Но на странице загрузки его отображается без анимации. Я вставил кнопку для замены массива категорий случайными числами, и он просто исчез.

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

Демоверсия здесь: http://plnkr.co/edit/3zXENPbYA3cxJQ3Pyb34?p=preview

Я нашел ответы на некоторые вопросы $timeout() но я получаю анимацию только на первом предмете. И это не очень хорошо.

Источник

2 ответа

Решение

По замыслу анимация отключена во время начальной загрузки, см. # 5130.

В комментарии lioli есть обходной путь (грязный хак), чтобы включить анимацию при загрузке страницы.

Поместите эту строку в начале вашего контроллера (не забудьте ввести $rootElement).

$rootElement.data("$$ngAnimateState").running = false;

Пример Plunker: http://plnkr.co/edit/9ZZ3JBOCaRJ41ssczX6l?p=preview

За вопрос, что вы получаете анимацию только на первый элемент. Сообщалось, что это ошибка, которая возникает только в минимизированной версии angular-animate, т.е. angular-animate.min.js,

В плунжере выше я изменился на неунифицированный angular-animate.js и, кажется, работает нормально.

Для более подробной информации о проблеме, смотрите: # 8297 и #7547

Источник

Другой вариант, помимо ответа @runTarm, - заполнить данные после начальной загрузки. Что-то простое, как:

$scope.items = [];

var items = 'abcdefghijklmnopqrstuvwxyz'.split("");

$timeout(function() {
  $scope.items = items;  
}, 0);

Модифицированный пример plunkr

Источник
Другие вопросы по тегам