angularjs - How to run animation when ng-repeat finished binding? -
angularjs - How to run animation when ng-repeat finished binding? -
here plunker demonstrate next behavior: class ng-hide removed tag before ng-repeat finished create html view of data, when removeclass triggered height of element not final , animation wouldn't correct.
any solutions sync info binding , animation?
index.html
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>angularjs plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link href="style.css" rel="stylesheet" /> <script src="https://code.angularjs.org/1.2.0/angular.min.js"></script> <script src="https://code.angularjs.org/1.2.0/angular-animate.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/tweenmax.min.js"></script> <script src="app.js"></script> </head> <body ng-app="app"> <div ng-controller="maincontroller"> <button ng-click="container.toggle()">toggle</button> <ul class="animation-slider" ng-show="container.show"> <li ng-repeat="item in container.items">{{item}}</li> </ul> </div> </body> </html> app.js
angular.module('app', [ 'nganimate' ]) .factory('container', function($q, $timeout) { homecoming function() { var deferred = $q.defer(); var promise = deferred.promise; var container = { show: false, items: [] }; promise.then(function(data) { container.items = data; container.show = true; }); container.toggle = function() { if (!container.show && container.items.length === 0) { container.load(); } else { container.show = !container.show; } }; container.load = function() { $timeout(function() { deferred.resolve([ 'lorem ipsum dolor sit down amet, consectetur adipiscing elit. pellentesque feugiat arcu in ligula euismod, vitae rhoncus erat porttitor. in vel metus pulvinar metus fermentum dapibus id nec ligula. nam ac justo id dolor euismod ornare. morbi sit down amet odio quis sapien sodales ornare dignissim european union risus. nunc efficitur bibendum odio. quisque vehicula maximus purus vel blandit. ut european union molestie urna. nulla elit ligula, tincidunt sit down amet iaculis lobortis, elementum et nunc. nulla european union egestas massa. aliquam erat volutpat. duis consequat cursus nibh ut sodales. mauris sit down amet neque volutpat, sodales lectus a, elementum sapien. in hac habitasse platea dictumst. proin et blandit nulla. duis eget tempus lorem.', 'mauris sit down amet sodales massa. pellentesque ut nunc tempus, maximus mauris consectetur, vehicula ex. vivamus urna urna, lacinia in eros nec, pulvinar porta augue. proin ullamcorper lacinia purus vitae efficitur. lorem ipsum dolor sit down amet, consectetur adipiscing elit. donec in massa in sem iaculis posuere sit down amet nec elit. ut ac nulla eget lorem tristique porta. aenean ac consequat sem.', 'donec luctus leo libero vehicula, consequat ullamcorper tortor facilisis. suspendisse potenti. etiam sed ultrices nibh, vel maximus enim. aenean european union nulla vitae lorem commodo tempor. donec sollicitudin tristique est. phasellus lobortis et orci vitae posuere. maecenas auctor cursus porttitor.' ]); //deferred.resolve([1,2]); }, 1000); }; homecoming container; }; }) .animation('.animation-slider', function() { homecoming { beforeaddclass: function(element, classname, done) { if (classname === 'ng-hide') { tweenmax.to(element, 1, { height: 0, oncomplete: done }); homecoming function() { element[0].style.height = ''; }; } else { done(); } }, removeclass: function(element, classname, done) { if (classname === 'ng-hide') { var height = element[0].clientheight; console.log(height); element.css('height', 0); tweenmax.to(element, 1, { height: height, oncomplete: done }); homecoming function() { element[0].style.height = ''; }; } else { done(); } } }; }) .controller('maincontroller', function($scope, container) { $scope.container = container(); });
if want set container.show true after lastly ng-repeat element has been stamped out, can create directive watches $last property true on stamped out elements. when it's true, directive set container.show true.
so html this, new handle-last-item-stamped directive on repeating li element:
<ul class="animation-slider" ng-show="container.show"> <li ng-repeat="item in container.items" handle-last-item-stamped="$last">{{item}}</li> </ul> and new directive (i injected $timeout in case need add together slight delay before showing):
.directive('handlelastitemstamped', ['$timeout', function($timeout){ homecoming { restrict: 'a', link: function (scope, element, attrs){ scope.$watch(attrs.handlelastitemstamped, function (newval, oldval){ if (newval) { scope.container.show = true; } }); } } }]); and, of course, you'd have remove container.show = true; promise.then.
here's plunk these changes: http://plnkr.co/edit/nvg6gh7vabyhqg5naula
angularjs angularjs-ng-repeat
Comments
Post a Comment