How to crossfade between two ngShow messages using css or ngAnimate - css

Question

I'm creating a form in angularjs in which there are two ngShow for error messages. Now, I want to crossfade these two messages placing them in the same spot. But, i'm not sure how to get it.
Here is the plunker link: http://plnkr.co/edit/EcT2oOmClz65WUgXgG4g?p=preview
I'm using 1.2.4 and linked the ng-animate lib. Right now the animation (fading in/out) is achieved using CSS not JS:
html:
<input type="email"
name="email"
class="form-control"
id="email"
placeholder="Email"
maxlength="100"
title="Company issued email address"
required
ng-class=""
ng-model="user.email"
ng-blur="buyContactForm.email.$blured = true" />
css:
.errAnimate {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
min-height: 22px;
}
.errAnimate.ng-show{
opacity: 1;
}
.errAnimate.ng-show-add, .errAnimate.ng-show-remove {
display:none!important;
}
.errAnimate.ng-hide{
opacity: 0;
}
.errAnimate.ng-hide-add, .errAnimate.ng-hide-remove {
display:block!important;
}
JS:
myApp.controller('myCtrl', function($scope){
$scope.user={
email: ''
};
$scope.showFieldError = function(formField, error, blured){
if(blured){
return formField.$error[error] && !formField.$pristine && formField.$blured;
}else{
return formField.$error[error] && !formField.$pristine;
}
};
// set live validation function for view load mode
$scope.showError = $scope.showFieldError;
});

Answer 1

The way you can do it is by adding position: absolute to the container's style, like this:
.errAnimate {
position: absolute;
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
min-height: 22px;
}
This will make both errors have the same position while fading, and thus overlapping (which is what I think you mean by crossfading)
I also had to change the width of the container because its width was making the error messages span several lines.
Here is a link to the edited plunker