[英]AngularJs animation for when ng-show value equal to false
in my code i'm showing alert message when ng-show true. 在我的代码中,当ng-show true时,我正在显示警报消息。 im using css for animation. 即时通讯使用CSS动画。 when the ng-show true "requiredErrorBlock" class working and display div right to left, That is working fine. 当ng-show true“ requiredErrorBlock”类正常工作并从右向左显示div时,表示工作正常。 I need to add some css same as that for when ng-show get false. 我需要添加一些与ng-show get false时相同的css。 the animation should be remove the div left to right. 动画应从左至右移除div。 can i know how to do that in my code. 我可以在我的代码中知道该怎么做。
Html 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 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;
}
You can try using ng-class attribute where you can apply css class conditionally. 您可以尝试使用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>
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. 通过将ng-class和ng-show中的条件分配给相应JS控制器中的$ scope变量,并使用该新变量代替条件,可以使代码更整洁。
Do let me know if that is what you are looking for. 请让我知道您是否在寻找。 If not, please provide Code Pen demo. 如果没有,请提供代码笔演示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.