Wie man eine div-Höhenänderung mit AngularJS

Question

animieren kann Ich habe ein Div, das Artikeltitel aus einem RSS-Feed enthält. Dies macht die div-Größe dynamisch, je nachdem, welcher Feed angeschaut wird, Länge der Artikeltitel usw. Ich möchte die Änderung in div height eine glatte Animation wie Sie here sehen, außer mit angleJS anstelle von jQuery.

Die einzige Animation ich mit kantigem getan haben, ist nur ein Fade-In Fade-Out Sachen Textart

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

Welche ziemlich einfach war verwenden, so hoffentlich auch sein wird.

Answer 1

Einfaches Beispiel, basierend auf ngAnimate angeborenes Überwachen des Hinzufügens und Entfernens von Klassen. Definieren 3 CSS-Klassen:

.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; 
} 

und erklären div:

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

Dies sollte Ihnen Größe ändernden div auf Klick: Winkel erkennt Hinzufügen/Entfernen von kleinen/großen Klassen und aktiviert Animation basiert auf transformierbare CSS-Klassenwerte. Sie können ähnliche Schritte mit anderen animationsfertigen Anweisungen (z. B. ng-repeat) ausführen oder benutzerdefinierte Verhaltensweisen erstellen. Der Artikel von Jessegavin scheint ein guter Grund dafür zu sein.