代码之家  ›  专栏  ›  技术社区  ›  Mahesh Sanjeewa

当ng show value等于false时的AngularJs动画

  •  0
  • Mahesh Sanjeewa  · 技术社区  · 7 年前

    在我的代码中,当ng显示为true时,我将显示警告消息。我使用css制作动画。当ng显示true“requiredrorblock”类working并从右向左显示div时,就可以正常工作了。我需要添加一些css,当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>
    

    @-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;
    }
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   Sukanya Pai    7 年前

    您可以尝试使用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类和ng show中的条件分配给相应JS控制器中的$scope变量并使用该新变量代替条件,可以使代码更干净。