All geek questions in one place

Animations in AngularJS ng-show

I am trying to get an ng-show element for animation when it becomes visible / hidden. But it just acts like a regular ng-show, instand show / hide.

I found this example: http://jsfiddle.net/Kx4TS/1/ which works fine.

but if I use the same ng-animate attribute and the same css, it does not work in my case. Is there anything else I need to do, or cases where the animation will not work?

my code is as follows:

<div style="" ng-show="item.hasMax()" class="box" ng-animate="{show: 'fadeIn', hide:'fadeOut'}">

and css:

  .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 things like jQuery slideDown / slideUp animation?

+6
source share
2 answers

The sample script uses Angular version 1.1.4. Make sure you also have a newer version of Angular. I suggest you get the latest version. Now it is 1.1.5, in which there are some important bug fixes.

+5
source

The animation approach has changed with Angular 1.2. Here's an article ( year of moo post ) that explains the differences. Now it is much simpler - it does not require ng animation.

+2
source

Source: https://habr.com/ru/post/948678/

More articles:


All Articles