FAQ Database Discussion Community


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"...

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...

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...

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...

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;...

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...

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:...

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;...

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 /**...

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...

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...

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...

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...

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...

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>{{...

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...