Как оживить изменение высоты div с помощью AngularJS

У меня есть div, который содержит заголовки статей из RSS-канала. Это делает динамический размер div в зависимости от того, на какой корм просматривается, длина заголовков статей и т.д. Я бы хотел, чтобы изменение высоты div было гладкой анимацией, как вы видите здесь, за исключением использования angularJS вместо jQuery.

Единственная анимация, которую я сделал с помощью Angular, - это просто материал с постепенным исчезновением текста с использованием

ng-enter{opacity:0;} ng-enter-active{opacity:1;}

Это было довольно просто, так что, надеюсь, это тоже будет.

ОТВЕТЫ

Ответ 1

Простой пример, основанный на врожденном мониторинге добавления и удаления классов ngAnimate. Определить 3 класса css:

.transformable {
    -webkit-transition: height 100ms linear;
    -moz-transition: height 100ms linear;
    -o-transition: height 100ms linear;
    -ms-transition: height 100ms linear;
    transition: height 100ms linear;

}

.small {
    height:100px;
}

.big {
    height:300px;
}

и объявите свой div:

<div class="transformable" ng-class="{'small':isSmall, 'big':!isSmall}" ng-click="isSmall = !isSmall"> </div>

Это даст вам изменение размера div на клике: angular обнаруживает добавление/удаление малых/больших классов и активирует анимацию на основе преобразованных значений класса css. Вы можете делать аналогичные действия с другими готовыми к анимации директивами (например, ng-repeat) или создавать свое собственное поведение. Статья из jessegavin кажется хорошим праймером на этом.