FAQ Database Discussion Community


Why doesn't this animate?

angularjs,ng-animate
http://plnkr.co/edit/k9W3AVDJS3spQXuUnHmF I am trying to animate using the $animate service with the animate.css library, but I can't seem to get it right. The blue block works because it's using the animate.css class, how can I make it $animate.leave with another css class from the library. Second, the red block isn't...

How do I make ui-router wait for animation to complete before showing new state?

angular-ui-router,ng-animate
In this example, clicking route2 will cause "bar" to fade in at the same time "foo" fades out. How do I make "bar" fade in after "foo" fades out? http://plnkr.co/edit/NsZhDL?p=preview My use case: I have 2 full screen pages that I would like to do a fade transition between. I...

FadeOut/FadeIn animations before/after ngAnimate

css,angularjs,animation,css-animations,ng-animate
I have this form on plunker and a struggling with adding a fade animation. What I want to do is, before the keyframe animation starts have the content fade out. And when the new view appears, I want the the keyframe animation to finish and than an animate.css animation to...

AngularJS/ng-animate - Cross-fade animation with dynamic content

angularjs,css-animations,fade,ng-animate
I have a container on my page, which has a background and a min-height. Inside the container, I have several "page" divs which are toggled with ng-if logic. These pages are dynamic, so the parent container's height depends on the height of these children. The basic structure is like this:...

AngularJS | ngAnimate Form Errors

html,css,angularjs,ng-animate
I have my form errors displaying fine at the moment using css / conditional classes however, I've discovered ng-message and ng-animate. Can ng-message be used to house the error messages? I also can't find any tutorials on animating ( fading in the error messages ) using ng-animate. Currently I'm using...

ngDocs example using ngAnimate

javascript,angularjs,ng-animate
I am generating my API documentation using grunt-ngDocs. I am having trouble using examples that contain animation using ngAnimate. I have included angular-animate script within the scripts option (as required by ngdocs) and I see animations occurring when I navigate through the generated documentation. Here is my example code /**...

ng-animate not working with ng-show

javascript,html,angularjs,ng-animate
I have ng-animate working on my ng-view; however, I can't seem to get it working for ng-show. I would like to fade in a sub-section inside the ng-view. Here is my html: <section id="content" ng-show="!isSpanish"> <item-list page="page" is-spanish="isSpanish" info="info" list="list" api="api" objects="objects"></item-list> <item-content page="page" staff="staff" info="info" blog-items="list" list="objects" api="api" overview="filteredOverview"...

Is there an angular animate way to emulate this ng-class behaviour

javascript,css,angularjs,ng-animate
I tried to use ng-animate i included in my controller app = angular.module('Packs', ['ngAnimate']); This is my style: <style> .animate-in { opacity: 0; max-height: 0; overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .animate-out{ opacity: 1; max-height: 200px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all...

AngularJs animation for ng-show faster when showing than hiding

javascript,angularjs,transition,ng-animate,ng-show
I have an Angular (1.3.14) app (shown below) which is supposed to animate the ng-show when you click the link. I expect it to expand / contract at the same speed, but I cannot get it to work correctly. I also don't know why the height change is waiting until...

Cannot Animate Custom Directive with ngShow

javascript,css,angularjs,twitter-bootstrap,ng-animate
I'm trying to animate a custom modal directive using ng-show, following the example shown on the Angular website (example is at the very bottom of the page). However, I haven't had any luck getting it to work. I'm using Angular 1.3.x with Bootstrap 3.3.x. I'm not using Angular UI Bootstrap...

Custom Animations with ng-animate $animate

angularjs,ng-animate
I need some help on better understanding custom animations in AngularJS 1.3. The objective Click on an element Animate separate element on the DOM I have created the following plunkr with no success http://plnkr.co/edit/zg3BglCY9VfgPJc2pfNg?p=preview <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script> <script...

ng-animate does not work with ng-repeat

javascript,angularjs,material-design,ng-animate
I want my navigation items to be animated when i change the navigation, hence am using 'ng-animate', but no effect is being applied. Here is my code, HTML: <md-list-item class="md-3-line" ng-animate="'animate'" ng-repeat="widget in Widgets | filter : selected"> <div layout="row" layout-margin> <div flex="60"> <img ng-src="{{widget.icon}}" class="md-avatar" alt="{{widget.title}}"> <div class="md-list-item-text"> <h4>{{...

Ng-Animate doesn't work with Chrome

css,angularjs,ng-animate,animate.css
I have some compatibility problems between Chrome and Firefox. I use ng-view to create an animation (with ng-ng-enter and leave). Here is an example with a plunker: http://plnkr.co/edit/Vo2cJ72DO0a5aSCipkvg?p=preview style.css .view.ng-leave, .view.ng-enter{ -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -ms-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both;...

Angular 1.4 and using ngAnimate with JavaScript

javascript,angularjs,ng-animate
I'm trying to setup a ngAnimate .animation() script with Angular 1.4 but I am struggling with the basics as this should display an alert but it does not : .animation('.animated', function () { // should display an alert here... alert('hello ?'); }) I must be missing something but can't figure...

ngAnimate slide down/up with non-fix height

javascript,html,css,angularjs,ng-animate
I would like to create a simple slide down/up animation for a div. The problem is that it only works when the div has fix height. index.html <div id="guildDetails" class="animate-show" ng-show="guildDetails.show"> </div> style.css .ng-hide-add, .ng-hide-remove { display: block !important; } .animate-show { transition: .3s linear all; height: 500px; overflow: hidden;...

Angular ng-repeat animate once

css,angularjs,animation,ng-animate
I am using ngAnimate to animate entries in an ng-repeat. When loading the data all elements are animated as I have defined in my css: .chat-message.notice.ng-enter { -webkit-animation: rubberBand 1s; -moz-animation: rubberBand 1s; -ms-animation: rubberBand 1s; animation: rubberBand 1s; } This works when a notice is appended with the following...

Repeatable animation with AngularJS

javascript,angularjs,animation,angularjs-directive,ng-animate
I'm using a custom directive to trigger an animation on an element when a specified field is blank on the page. As of now when a user clicks the button with my custom directive the animation will work, once. Clicking the button again will not fire the animation and I'm...