Question

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

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

我正在使用1.2.4并链接了ng-animate lib。现在，使用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;
});

Answer 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;
}

这会使两个错误在衰落时具有相同的位置，从而重叠（这就是我认为你的意思是交叉渐变）

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

Here is a link to the edited plunker

如何使用css或ngAnimate在两个ngShow消息之间交叉淡入淡出

1 个答案: