ng-show值等於false時的AngularJs動畫

Question

在我的代碼中，當ng-show true時，我正在顯示警報消息。 即時通訊使用CSS動畫。 當ng-show true“ requiredErrorBlock”類正常工作並從右向左顯示div時，表示工作正常。 我需要添加一些與ng-show get false時相同的css。 動畫應從左至右移除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中的條件分配給相應JS控制器中的$ scope變量，並使用該新變量代替條件，可以使代碼更整潔。

請讓我知道您是否在尋找。 如果沒有，請提供代碼筆演示。