Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Эти адские анимации в 1.2 (https://javascript.ru/forum/angular/48902-ehti-adskie-animacii-v-1-2-a.html)

dtzscln 21.07.2014 14:50

Эти адские анимации в 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')), при котором вопросов возникнуть просто не может и всё прекрасно работает.
Анимировать появление пачки элементов таким способом не получается)

Shitbox2 21.07.2014 15:19

Пример не работает. ngAnimate просто выдирает из css-анимации длительность и ставит в нужный момент классы. Разработчику просто нужно правильно описать свойства анимации

dtzscln 21.07.2014 15:47

На jsfiddle не получается подключить ангуляр. Код рабочий

Можете привести пример, как анимировать добавление пачки элементов в коллекцию? Я всё что нужно уже написал выше, вы только цсс напишите. Я ума не приложу как это сделать, с учетом того, что ангуляр не оставляет после анимации никаких классов на элементе.

Tek 21.07.2014 16:04

как я понимаю нужно что то вроде http://www.nganimate.org/angularjs/ng-repeat/move

Shitbox2 21.07.2014 16:24

Куча же примеров со списками в инете http://www.nganimate.org/ это для старого ангуляра, для нового чуть по-другому, но стили такие же

dtzscln 21.07.2014 16:54

Эти примеры далеки от реальных нужд.

http://www.nganimate.org/angularjs/ng-repeat/move
Да вот даже на этом примере. Поставтье transition не на 400мс, а на 1секунду хотя бы, и будет отчетливо видно, что opacity анимируется только у первого (!) элемента в коллекции.

http://plnkr.co/edit/SCwTrJWyaTivud6c5b5W
Не могу найти песочницу с работующем ангуляр + ngAnimate

Shitbox2 21.07.2014 17:02

Пожалуйста, пример анимации списка для Ангуляра 1.2 http://plnkr.co/edit/AAv3LfwkhPWyW4Den4DL?p=preview


Часовой пояс GMT +3, время: 22:44.