1

我正在 angularjs 中创建一个表单，其中有两个 ngShow 用于错误消息。现在，我想交叉淡化这两条消息，将它们放在同一个位置。但是，我不确定如何获得它。

这是 plunker 链接：http ://plnkr.co/edit/EcT2oOmClz65WUgXgG4g?p=preview

我正在使用 1.2.4 并链接了 ng-animate 库。现在动画（淡入/淡出）是使用 CSS 而不是 JS 实现的：

html:

<input type="email"
       name="email"
       class="form-control"
       id="email"
       placeholder="Email"
       maxlength="100"
       title="Company issued email address"
       required
       ng-class=""
       ng-model="user.email"
       ng-blur="buyContactForm.email.$blured = true" />

CSS：

.errAnimate {
    -webkit-transition:all linear 0.5s;
    -moz-transition:all linear 0.5s;
    -ms-transition:all linear 0.5s;
    -o-transition:all linear 0.5s;
    transition:all linear 0.5s;
    min-height: 22px;
}    
.errAnimate.ng-show{
    opacity: 1;
}

.errAnimate.ng-show-add, .errAnimate.ng-show-remove {
    display:none!important;
}    
.errAnimate.ng-hide{
    opacity: 0;
}
.errAnimate.ng-hide-add, .errAnimate.ng-hide-remove {
    display:block!important;
}

JS：

myApp.controller('myCtrl', function($scope){
    $scope.user={
        email: ''
    };
    $scope.showFieldError = function(formField, error, blured){
        if(blured){
            return formField.$error[error] && !formField.$pristine && formField.$blured;
        }else{
            return formField.$error[error] && !formField.$pristine;
        }
    };
    // set live validation function for view load mode
    $scope.showError = $scope.showFieldError;
});
4

1 回答 1

1

您可以通过将position: absolute添加到容器的样式中，如下所示：

.errAnimate {
    position: absolute;

    -webkit-transition:all linear 0.5s;
    -moz-transition:all linear 0.5s;
    -ms-transition:all linear 0.5s;
    -o-transition:all linear 0.5s;
    transition:all linear 0.5s;
    min-height: 22px;
}

这将使两个错误在淡入淡出时具有相同的位置，从而重叠（这就是我认为您所说的交叉淡入淡出的意思）

我还必须更改容器的宽度，因为它的宽度使错误消息跨越多行。

这是编辑后的 ​​plunker 的链接

于 2014-07-28T18:05:59.477 回答