Comment animer un div changement de la hauteur avec AngularJS

J'ai un div qui contient les titres des articles à partir d'un flux RSS. Cela rend le div de taille dynamique en fonction de la ration est d'être regardé, de la longueur des titres des articles, etc. Je voudrais faire le changement dans la div hauteur de être une animation fluide comme vous le voyez ici, sauf à l'aide d'angularJS au lieu de jQuery.

La seule animation que j'ai fait avec Angulaire est juste un fade-in fade-out type de texte des trucs à l'aide de

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

Qui était assez simple, donc j'espère que ce sera aussi bien.

C'est le meilleur article sur AngularJS animation. Il va vous montrer tout ce que vous devez savoir. yearofmoo.com/2013/08/...
Le mot "hauteur" n'apparaît nulle part dans cet article (que j'avais déjà lu).

OriginalL'auteur Hoser | 2014-01-15

  1. 24

    Exemple Simple, basé sur ngAnimate innée de surveillance de l'ajout et la suppression des classes. Définir 3 classes 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;
}

    et déclarer votre div : 

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

    Cela devrait vous donner la taille-modification de la div sur cliquez sur : angulaire détecte ajout/suppression de petites/grandes classes et active d'animation basé sur transformables valeurs de classe css.
    Vous pouvez faire des choses similaires avec d'autres films d'animation-prêt directives (par exemple, ng-repeat) ou la création de votre propre comportement. L'article de jessegavin semble être une bonne amorce sur ce.

    Est-il de toute façon pour ce faire, un élément inconnu de la hauteur? (c'est à dire height:auto;)
    vous pouvez utiliser max-height à la place. Prises à partir de cette réponse: stackoverflow.com/a/8331169/2247854

    OriginalL'auteur Sycomor