Angular fade animation with css3 transtions
I am trying to insert / disable a div on click of a link using ngAnimate and css3 transitions. I have the following, but it doesn't work. Div shown / hidden but not fading or missing. 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;
}
div is hidden at first ( showMe
= false). There is a link on the page that sets showMe
to true.
<div ng-show="showMe" class="fade-in-out">
<div style="float: right; cursor: pointer;" ng-click="showMe=false">x</div>
blablabla
</div>
Please note that I am using angular 1.2.26.
+3
source to share
1 answer
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 dependent module.
+17
source to share