Эти адские анимации в 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, время: 07:55. |