Миграция из jQuery в AngularJS

Question

У меня есть код jQuery, который немного устарел. Я пытаюсь перенести его в AngularJS. Как часть этого, у меня есть DIV, который выглядит следующим образом:

<div id="infoMsg" class="infoMsg"></div> 

Иногда этот DIV скрыт. Иногда его видно. Все это основано на действиях пользователя. Для переключения, я хотел бы использовать JQuery встроенных в методах показать/скрыть, как, например:

$("#infoMsg", "#myPage").hide(); 
$("#infoMsg", "#myPage").show("blind"); 

Ключевыми здесь шоу («слепой») компонент. "blind" effect дает вид элемента со скольжением дюйма Мой вопрос в том, как я могу сделать то же самое в мире AngularJS?

В настоящее время у меня есть флаг на моей сфере действия, указанный как $scope.showMessage = false. Моя идея состояла в том, чтобы переключить это, чтобы сделать div видимым или нет. Однако этот подход не дает мне приятного «слепого» эффекта.

Answer 1

Угловые обеспечивает $animation обслуживания и ngAnimate директивы в angular-animate.js модуле (вы должны включить его отдельно, после angular.js). Эти вещи обеспечивают перехваты, которые облегчают анимацию либо через переходы CSS, анимацию ключевого кадра CSS, либо старую школу JS тайм-аутов/модификацию DOM ala jQuery.

Вам рекомендуется использовать CSS, так как вы получаете лучшую производительность, и проще разделить и сохранить презентацию из кода разметки и кода приложения.

Во-первых, developer guide on animations, второй, angular animate tutorial, и, наконец, API docs for the ngAnimate module.

Когда вы включаете ngAnimate модуль, некоторые директивы будут автоматически вклиниться в неживой (например, ngShow, ngHide, ngRepeat и т.д.). По умолчанию они просто добавляют классы для запуска переходов CSS, и все, что вам нужно сделать, это убедиться, что у вас есть имена классов CSS, чтобы делать то, что вы хотите.

В случае ngShow (или ngHide), это добавит классы ng-hide, ng-hide-add, а затем ng-hide-add-active начать переход скрытие. Когда анимация завершится, она просто оставит ng-hide. Когда вы покажете, он удалит ng-hide и добавит ng-hide-remove и ng-hide-remove-active. Звучит сложно, но это неплохо. Это довольно шаблонный. Эти состояния существуют для облегчения плавных переходов.

В моем примере в this plunk, все я был включать angular-module.js после angular.js и включают ngAnimate в моем модуле. Потом добавил следующую CSS, чтобы сделать сырую глухой, как анимацию для элементов с селектором .fancy:

.fancy { 
    padding:10px; 
    border:1px solid black; 
    background:red; 
} 

.fancy.ng-hide-add, .fancy.ng-hide-remove { 
    -webkit-transition:all linear 5s; 
    -moz-transition:all linear 5s; 
    -o-transition:all linear 5s; 
    transition:all linear 5s; 
    display:block!important; 
} 

.fancy.ng-hide-add.ng-hide-add-active, 
.fancy.ng-hide-remove { 
    max-height: 0; 
} 

.fancy.ng-hide-add, 
.fancy.ng-hide-remove.ng-hide-remove-active { 
    max-height:100px; 
} 

Этот переходом является лишь простым примером. Вы, вероятно, захотите улучшить его, поскольку вещь max-height немного взломана. Подумайте об использовании одного из них для вас в Animate.css.

В любом случае, с CSS на месте, все, что я делаю, обычно используется ngShow, придавая элементу класс fancy, поэтому правильные переходы применяются, когда он показывает и скрывается.