ng-animate

I was playing around with recently added angular.js animations feature, and this doesn't work as desired <style> .myDiv{ width:400px; height:200px; background-color:red; } .fadeIn-setup,.fadeOut-setup { -webkit-transition: 1s linear opacity; -moz-transition: 1s linear opacity; -o-transition: 1s linear opacity; transition: 1s linear opacity; } .fadeIn-setup{ opacity:0; } .fadeOut-setup{ opacity:1; } .fadeIn-setup.fadeIn-start { opacity: 1; } .fadeOut-setup.fadeOut-start{ opacity:0; } </style> <div ng-app> <div ng-controller='ctrl'> <input type='button' value='click' ng-click='clicked()' /> <div

I am using angular-ui-router with angularJS v1.2 and would like to implement custom page transitions. How can I use ng-animate with ui-view (from angular-ui-router ) rather than ng-view (which would be the standard way)? See Remastered Animation in AngularJS 1.2 for reference on ng-view. EDIT: I have tried two different versions of angular: v1.2.0-rc.2 and v1.2.0-rc.3 as suggested in the comments, but neither seems to do the trick. I guess I might be doing something wrong? Here is the HTML: <div ui-view class="slide"></div> and the CSS: .slide { width:1024px; height:768px; } .slide.ng-enter,

I have an element whose visibility is toggled by ng-show . I'm also using CSS animations - the automatic ones from ng-animate - on this element to animate its entry. The element will either contain an image or a video. In the case that the element contains a video, I want to play it, but I don't want to play the video until it's finished animating in. As such, I was wondering if there's an easy way to bind a callback to the end of a CSS animation in AngularJS? The docs reference a doneCallback , but I can't see a way to specify it... One workaround(?) I have thought of is $watch ing element

I have created a table in which user can increase and decrease the value. See the Fiddle //sample code as its not allowing me to push the link to JSFiddle with out pasting code <tr ng-repeat="d in dataSource" ng-animate="'animate'"> // css - as from angular page .animate-enter { -webkit-transition: 1s linear all; /* Chrome */ transition: 1s linear all; background-color:Yellow; } .animate-enter.animate-enter-active { background-color:Red; } I want to do animation when the model updates i.e the table column changes in background color From Red to white in case user changes the value. So when you

I'm using the ngAnimate module, but all my ng-if , ng-show , etc, are affected by that, I want to leverage ngAnimate for some selected elements. For performance and some bugs in elements that shows and hide very speedy. thanks. David Addoteye Just add this to your CSS. It is best if it is the last rule: .no-animate { -webkit-transition: none !important; transition: none !important; } then add no-animate to the class of element you want to disable. Example: <div class="no-animate"></div> If you want to enable animations for specific elements (as opposed to disabling them for specific elements)