Angular/CSS - Animer le déplacement du contenu lors de l'ajout dynamique de nouveaux éléments

Question

Animation angulaire ici.

Je peux animer avec succès le contenu sur la page en utilisant ngAnimate. Cependant, quand mon nouveau contenu glisse, tout le contenu ci-dessous saute à sa nouvelle position. De même, lorsque le nouveau contenu est supprimé, le contenu suivant revient en arrière. Existe-t-il une manière angulaire d'animer la nouvelle position du contenu suivant?

<button class="button" ng-if="typingResponse"> 
    Submit! 
</button> 
<div class="response-section"> 
    <label class="item item-input item-stacked-label"> 
    <span class="input-label">Response</span> 
    <textarea></textarea> 
    </label> 
</div> 


.button.ng-enter { 
    -webkit-animate: slideInLeft 1s; 
    animation: slideInLeft 1s; 
} 
.button.ng-leave { 
    -webkit-animate: slideOutLeft 1s; 
    animation: slideOutLeft 1s; 
} 

Answer 1

@klauskpm m'a le plus du chemin, et this blog post était la pièce manquante.

Solution:

1. Mettre le bouton à l'intérieur d'un div
2. Régler le max-height initial de la div 0px
3. Spécifiez une transition max-height de la div propriété
4. Lorsque le bouton est de être affiché, augmenter la propriété max-height du div

Code Mise à jour:

<div class="button-container" ng-class="{'has-button': typingResponse}"> 
    <button class="button" ng-if="typingResponse"> 
    Submit 
    </button> 
</div> 
<div class="response-section"> 
    <label class="item item-input item-stacked-label"> 
    <span class="input-label">Response</span> 
    <textarea></textarea> 
    </label> 
</div> 

.button.ng-enter { 
    -webkit-animate: slideInLeft $slide-dur; 
    animation: slideInLeft $slide-dur; 
} 
.button.ng-leave { 
    -webkit-animate: slideOutLeft $slide-dur; 
    animation: slideOutLeft $slide-dur; 
} 


.button-container { 
    max-height: 0px; 
    transition: max-height $slide-dur linear; 
    -webkit-transition: max-height $slide-dur linear; 
} 

.button-container.has-button { 
    max-height: 100px; 
}