angular fade animation with css3 transtions
15,689
The correct classes to use are:
.my-element.ng-hide-add, .my-element.ng-hide-remove {
transition:0.5s linear all;
}
.my-element.ng-hide-add { ... }
.my-element.ng-hide-add.ng-hide-add-active { ... }
.my-element.ng-hide-remove { ... }
.my-element.ng-hide-remove.ng-hide-remove-active { ... }
In your case this will be enough:
.fade-in-out {
transition: 1s linear all;
opacity: 1;
}
.fade-in-out.ng-hide {
opacity: 0;
}
Demo: http://plnkr.co/edit/WM60wEYeQD7J1GuHG0WL?p=preview
Note that angular-animate.js
must be loaded and ngAnimate
must be added as a dependant module.
Author by
user1491636
Updated on June 04, 2022Comments
-
user1491636 almost 2 years
I'm trying to fade in/out a div on click of a link using ngAnimate and css3 transitions. I have the following, but it isn't working. The div is shown/hidden, but does not fade in or out. Where did I go wrong:
.fade-in-out.ng-add { transition: 1s linear all; opacity: 0; } .fade-in-out.ng-add-active { opacity: 1; } .fade-in-out.ng-remove { transition: 1s linear all; opacity: 1; } .fade-in-out.ng-remove-active { opacity: 0; }
The div is initially hidden (
showMe
=false). On the page is a link which setsshowMe
to true.<div ng-show="showMe" class="fade-in-out"> <div style="float: right; cursor: pointer;" ng-click="showMe=false">x</div> blablabla </div>
Note that I'm using angular 1.2.26.
-
user1491636 over 9 yearsJust for understanding, why would ng-show not be the correct class to use?
-
tasseKATT over 9 yearsAngular adds
ng-hide
when hiding something and removes it when showing something. Using theng-show
orng-hide
directive doesn't matter. There is nong-show
class that is added by Angular. -
user1491636 over 9 yearsSince you're well versed in this area, can you take a look at a similar issue: stackoverflow.com/questions/27140770/…
-
tasseKATT over 9 yearsSure, will take a look :)
-
toxaq about 8 yearsThank you for your footer note, helped me avoid a giant headache!