Как сделать анимацию специально для ngShow / ngHide (ngAnimation)

Я изучил этот урок: https://docs.angularjs.org/api/ngAnimate. Хорошо, что он работает (я использовал пример из следующей ссылки из анимации на основе CSS), но проблема, с которой я столкнулся, заключается в том, что все DOM, которые используют ng-show / ng-hide, похоже, зависят от анимации. Я хочу, чтобы анимация влияла только на определенный элемент, как в этом примере:

CSS:

.fade-in-out {
  transition: 1s linear all;  
  opacity: 1;
}

.fade-in-out.ng-hide {
  opacity: 0;
}

<div class='col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12 fade-in-out' ng-show='checked'><input type="text" name="first-name"></div>
<div class='col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12 fade-in-out' ng-show='checked'><input type="text" name="last-name"></div>

JS:

$timeout(function () {
    scope.checked = true;
}, 2000);

Код работает, но все другие модели DOM, использующие ng-hide / ng-show, также страдают, я хочу сделать его специфичным только для приведенного выше кода или только для указанных выше html-объектов. Причина этого в том, что в конечном итоге я хочу создать форму начальной загрузки (созданную динамически с помощью js), которая будет исчезать. Поскольку она создается динамически - я не мог просто объединить два входа в один div (объяснение этого было бы слишком длинный). Есть какой-либо способ сделать это? Я новичок в этой технологии.


javascript animation angularjs ng-animate
person The Bassman    schedule 24.11.2015    source источник
comment
‹Div class = 'col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12 fade-in-out' ng-show = 'checked'› ‹input type = text name = имя ›‹/div›‹ div class = 'col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12 fade-in-out' ng-show = ' отмечен '›‹ input type = text name = last-name ›‹/div›   -  person The Bassman    schedule 24.11.2015
comment
Отредактировал мой вопрос, вы можете спросить, почему я не объединю эти два в один div   -  person The Bassman    schedule 24.11.2015

Ответы (1)


arrow_upward
1
arrow_downward

Используйте разные ng-show выражения для разных разделов.

<div ng-app="myApp" controller="myVm">

    <div class='fade-in-out' ng-show='!checked'>
        <input type="text" name="first-name">
    </div>
    <div class='fade-in-out' ng-show='!checked'>
        <input type="text" name="last-name">
    </div>

    <div class='fade-in-out' ng-show='!checked2'>
        <input type="text" name="first-name">
    </div>
    <div class='fade-in-out' ng-show='!checked2'>
        <input type="text" name="last-name">
    </div>

    <input type="checkbox" ng-model="checked">
    <input type="checkbox" ng-model="checked2">
</div>

JS

angular.module("myApp", ['ngAnimate']);

angular.module("myApp").controller("myVm", function($scope) {
});

CSS

.fade-in-out {
  transition: 1s linear all;  
  opacity: 1;
}

.fade-in-out.ng-hide {
  opacity: 0;
}
person georgeawg    schedule 24.11.2015
comment
Спасибо за ответ, но я должен был упомянуть возможность, что я могу реализовать его в двух или более похожих DOM, но не во всех. Я соответствующим образом отредактирую свой вопрос. Спасибо - person The Bassman; 24.11.2015
comment
Привет, ваш ответ на самом деле дал мне идею, и он заставил меня структурировать базовый код, чтобы он соответствовал вашему решению. У меня уже есть ответ, спасибо тебе! - person The Bassman; 24.11.2015