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

Question

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

这是插件链接: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;
});

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