Menu
I'm trying to get an ng-show element to animate when it becomes visible/hidden. But it just acts like a normal ng-show, instand show/hide.
I found this example: http://jsfiddle.net/Kx4TS/1/ which works fine.
yet, if I use the same ng-animate attribute and the same css, it doesn't work in my case. Is there anything else I need to do or cases where animations won't work?
my code looks like this:
<div style="" ng-show="item.hasMax()"
class="box" ng-animate="{show: 'fadeIn', hide:'fadeOut'}">
and the css is:
.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;
}
Also, is it possible to make ng-animate do stuff like the jquery slideDown / slideUp animations?
531
The ngAnimate module does not animate your HTML elements, but when ngAnimate notice certain events, like hide or show of an HTML element, the element gets some pre-defined classes which can be used to make animations. The directives in AngularJS who add/remove classes are: ng-show. ng-hide.
AngularJS ng-show directive is an In-Built AngularJS directive which can be used on HTML View Page to hide or show a particular section (div, input, etc.). In the HTML view, which is based on evaluation of expression defined in ng-show.
AngularJS comes with the feature of animated transitions too. With the help of CSS, AngularJS can provide animation. The very first step for AngularJS animation is to include an animation library. Then, refer ng-animate module in an application.
The main Angular modules for animations are @angular/animations and @angular/platform-browser . When you create a new project using the CLI, these dependencies are automatically added to your project. To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality.
The fiddle example uses Angular version 1.1.4. Make sure you also have a newer version of angular available. I suggest you get the latest version. Right now it is the 1.1.5, which has some important bug fixes.
148
The animation approach changed with Angular 1.2. Here's an article (year of moo post) that explains the differences. It's much simpler now - doesn't require ng-animate.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
