Эти адские анимации в 1.2
Задача:
В контроллере есть пустой массив. Через какое-то время (когда придет ответ от сервера) в этом массиве станет, допустим, 5 элементов. Я хочу анимировать их появление (прозрачность от 0 до 1 и масштаб от 0.6 до 1). <div ng-controller="MainController"> <ul> <li ng-repeat="item in items">{{ item }}</li> </ul> </div> li { transition: all 0.7s; } li.ng-enter { opacity: 0; -webkit-transform: scale(0.6); transform: scale(0.6); } myApp.controller("MainController", function($scope, $timeout) { $scope.items = []; $timeout(function() { var data = [123, 1234, 9812]; $scope.items = data; }, 2000); }); http://jsfiddle.net/HB7LU/5066/ Никаки не получается этого добиться. Все примеры по анимации ng-repeat оч хитрые - они берут самый простой пример (делают кнопку и по нажатию на нее происходит $scope.items.push('new val')), при котором вопросов возникнуть просто не может и всё прекрасно работает. Анимировать появление пачки элементов таким способом не получается) |
Пример не работает. ngAnimate просто выдирает из css-анимации длительность и ставит в нужный момент классы. Разработчику просто нужно правильно описать свойства анимации
|
На jsfiddle не получается подключить ангуляр. Код рабочий
Можете привести пример, как анимировать добавление пачки элементов в коллекцию? Я всё что нужно уже написал выше, вы только цсс напишите. Я ума не приложу как это сделать, с учетом того, что ангуляр не оставляет после анимации никаких классов на элементе. |
как я понимаю нужно что то вроде http://www.nganimate.org/angularjs/ng-repeat/move
|
Куча же примеров со списками в инете http://www.nganimate.org/ это для старого ангуляра, для нового чуть по-другому, но стили такие же
|
Эти примеры далеки от реальных нужд.
http://www.nganimate.org/angularjs/ng-repeat/move Да вот даже на этом примере. Поставтье transition не на 400мс, а на 1секунду хотя бы, и будет отчетливо видно, что opacity анимируется только у первого (!) элемента в коллекции. http://plnkr.co/edit/SCwTrJWyaTivud6c5b5W Не могу найти песочницу с работующем ангуляр + ngAnimate |
Пожалуйста, пример анимации списка для Ангуляра 1.2 http://plnkr.co/edit/AAv3LfwkhPWyW4Den4DL?p=preview
|
Часовой пояс GMT +3, время: 22:44. |