Анимация AngularJs, когда значение ng-show равно false

Question

в моем коде я показываю предупреждающее сообщение, когда нг-шоу истина.Я использую CSS для анимации.когда класс ng-show true "requiredErrorBlock" работает и отображает div справа налево, это работает нормально.Мне нужно добавить некоторые CSS, как и для случая, когда NG-шоу ложь.анимация должна быть удалена div слева направо.Могу ли я знать, как это сделать в моем коде.

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

Вы можете попробовать использовать атрибут ng-class, где вы можете условно применить класс css.

<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>

Вы можете сделать свой код чище, назначив условие в ng-class и ng-show для $ scopeпеременная в соответствующем контроллере JS и использование этой новой переменной вместо условия.

Дайте мне знать, если это то, что вы ищете.Если нет, предоставьте демонстрационную версию Code Pen.