Angular предоставляет сервис $animation и директиву ngAnimate в модуле angular-animate.js (вы должны включить его отдельно после angular.js). Эти вещи предоставляют крючки, которые облегчают анимацию либо с помощью переходов CSS, анимации ключевых кадров CSS, либо старых циклов тайм-аута JS / модификации DOM аля jQuery.
Вам рекомендуется использовать CSS, так как вы повышаете производительность и упрощаете отделение и поддержку представления от разметки и кода приложения.
Во-первых, руководство разработчика по анимации, во-вторых, руководство по анимации Angular и, наконец, Документация по API для модуля ngAnimate.
Когда вы включаете модуль 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. Звучит сложно, но это не плохо. Это довольно шаблонно. Эти состояния существуют для облегчения плавных переходов.
Для моего примера в этом фрагменте все, что я сделал, это вставил 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, чтобы применялись правильные переходы, когда он показывается и скрывается.
04.04.2014
