AngularJS 1.2 fade animation from 0 to 0.5 not working

Question

So I have this simple fade animation using AngularJS 1.2 and the ngAnimate module but I'm having a small issue.

I want to show/hide an element with a fade animation but I want the element to fade from opacity: 0 to opacity: 0.5. The thing is, the element fades from 0 to 0.5 within the duration period I set, but after the animation ends, it sets the opacity to 1. I don't want that.

This is my CSS code:

.overlay {
    background-color: #ff0000;
    position: absolute;
    width: 150px;
    height: 150px;
}
.fade-animation.ng-hide-add, .fade-animation.ng-hide-remove {
    transition: 2s linear all;
    display: block !important;
}
.fade-animation.ng-hide-remove {
    opacity: 0;
}
.fade-animation.ng-hide-remove.ng-hide-remove-active {
    opacity: .5;
}
.fade-animation.ng-hide-add {
    opacity: .5;
}
.fade-animation.ng-hide-add.ng-hide-add-active {
    opacity: 0;
}

Here's a sample of the problem: http://jsfiddle.net/Kn3th/8/

I'm testing this on Firefox.

gkalpak gkalpak · Accepted Answer · 2013-11-08T16:42:26

That's because as soon as the animation completes, the animation-related classes are removed, so only the .overlay definition applies. Just add this to your CSS:

.overlay {
    ...
    opacity: .5;   // <-- add this line to apply an opacity of 0.5
}                         when the animation is over

See, also, this short demo.

AngularJS 1.2 fade animation from 0 to 0.5 not working

1 Answers