ng-animate

I'm a little flummoxed when it comes to animating ng-move in an ng-repeat. If I move an array item from 3 to 7 for instance, items 4-7 get shifted up and they animate. However the actual item I moved from 3 and placed in position 7, does not. Here's a plunkr demonstrating my issue. http://plnkr.co/edit/4yRkLWbsU57YxrYOrWUQ?p=preview Moving item 7 to 3, however, works as I expect, animating the single moved item, and not the items that have been pushed down. This is not very useful for showing a user what moved. How should someone properly animate an ng-move? antoine @tasseKat has an excellent

I am trying to use the new AngularJS way of doing animations between page transitions and would like to incorporate a card flip (like http://jsfiddle.net/nicooprat/GDdtS/ ) body { background: #ccc; } .flip { -webkit-perspective: 800; width: 400px; height: 200px; position: relative; margin: 50px auto; } .flip .card.flipped { -webkit-transform: rotatex(-180deg); } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .face { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden ; z-index: 2; font-family

I can't figure out how to trigger animations on a nested ngRepeat with Angular. The CSS class ".test" is animated. When using ".test" on the inner ngRepeat it doesn't work ( Plunker ): <div ng-repeat="section in sections"> <div ng-repeat="item in section.items" class="test"> <h2>{{item.title}}</h2> </div> </div> When using ".test" on the outer ngRepeat it does work ( Plunker ): <div ng-repeat="section in sections"> <div ng-repeat="item in section.items" class="test"> <h2>{{item.title}}</h2> </div> </div> You probably need to add ngAnimateChildren attribute on the parent container, and update

I've only been working with Angular for about a week, so I apologize if my code is crap. I'm attempting to create a sliding action between route transitions. I can create the effect in a slideshow but not between route transitions. Anyway code below: Nav <li><a ng-click="go('/')" class = "intro currentLink navLinks">Intro</a></li> <li><a ng-click="go('/why')" class = "why navLinks">Why</a></li> <li><a ng-click="go('/resume')" class = "resume navLinks">Res</a></li> <li><a ng-click="go('/qualified')" class = "qualified navLinks">How</a></li> <li><a ng-click="go('/contact')" class = "contact

When using ngAnimate to fade in each item in ngRepeat, currently all items fade in at the same time. Is it possible for each item to fade in after the previous item has faded to e.g. 50% resulting in a cascading effect? <ul> <li ng-repeat="phone in phones" ng-animate="{enter: 'phone-fade-enter'}"> <img src="{{phone.img}}"> {{phone.name}} </li> </ul> Using ngAnimate it would be nice if it would be possible to delay the animation of each item e.g. like this: <li ng-repeat="phone in phones" ng-animate="{enter: 'phone-enter', delay: 500}"> Is there a way to solve this? Thanks! Added to GitHub

I'm working on a school project using Angular.js. We also have to implement some animations in our website. Since my website is kind of master-detail, I would like to slide the detail page (which is a separately routed page) to slide in from right. This is not really a problem. But when I would go back to the 'master' page the master page would slide in from right. I'd much rather like the master page to slide in from left. Is there any way to get a specific ng-view animation depending on the page? I'd like to use CSS animations but that's more of a detail. I'm working with an index.html page