当 ng-show 值等于 false 时的 AngularJs 动画答案

【问题标题】：AngularJs animation for when ng-show value equal to false当 ng-show 值等于 false 时的 AngularJs 动画
【发布时间】：2019-02-01 10:15:52
【问题描述】：

在我的代码中，当 ng-show 为真时，我会显示警报消息。我使用 css 制作动画。当 ng-show true "requiredErrorBlock" 类工作并从右到左显示 div 时，工作正常。我需要添加一些与 ng-show 错误时相同的 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;
}

【问题讨论】：

标签： javascript css angularjs

【解决方案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 变量并使用该新变量代替条件来使代码更清晰。

如果这就是您要找的，请告诉我。如果没有，请提供 Code Pen 演示。

【讨论】：