AngularJs animation for when ng-show value equal to false

Question

in my code i'm showing alert message when ng-show true. im using css for animation. when the ng-show true "requiredErrorBlock" class working and display div right to left, That is working fine. I need to add some css same as that for when ng-show get false. the animation should be remove the div left to right. can i know how to do that in my code.

Html

<div class="requiredErrorBlock" ng-show="isRequiredFiledsMissing == true && isSubmited && form_Quote_cusPlan.$invalid">
    <span>
       <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color: #ffffff !important;"></i>
    </span> 
    Required fields Can not be empty.
</div>

Css

@-webkit-keyframes leftToRight {
    from {
        margin-left: 100%;
        height: 52px;
        width: 0%
    } to {
              margin-left: 0%;
    width: 100%;
      }
}

.requiredErrorBlock{
    position: fixed;
    bottom: 0px;
    left:0;
    width: 100%;
    z-index: 100000;
    color: #ffffff;
    background-color: #ed0039;
    padding: 15px;
    -webkit-animation: 0.9s leftToRight;
}

Answer 1

You can try using ng-class attribute where you can apply css class conditionally.

<div ng-class="{'requiredErrorBlock':isRequiredFiledsMissing == true && isSubmited && 
               form_Quote_cusPlan.$invalid}" 
     ng-show="isRequiredFiledsMissing == true && isSubmited && 
              form_Quote_cusPlan.$invalid">
    <span>
       <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color: #ffffff !important;"></i>
    </span> 
    Required fields Can not be empty.
</div>

You can make your code cleaner by assigning the condition in ng-class and ng-show to a $scope variable in the respective JS controller and using that new variable in place of condition.

Do let me know if that is what you are looking for. If not, please provide Code Pen demo.