Как переключаться между двумя сообщениями ngShow с помощью css или ngAnimate

Я создаю форму в 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;
});

css angularjs ng-animate ng-show
person srikar sastry    schedule 12.01.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать это, добавив 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;
}

Это приведет к тому, что обе ошибки будут иметь одинаковое положение при затухании и, таким образом, перекрываются (что, я думаю, вы подразумеваете под перекрестным затуханием)

Мне также пришлось изменить ширину контейнера, потому что из-за его ширины сообщения об ошибках занимали несколько строк.

Вот ссылка на отредактированный плункер

person Marcos Pereira    schedule 28.07.2014