角度/ CSS - 新しい要素が動的に追加されたときのコンテンツのアニメーションの移動

Question

角のアニメーションnoobはここにあります。

ngAnimateを使用してコンテンツをページに正常にアニメーションできます。しかし、私の新しいコンテンツがスライドすると、その下のすべてのコンテンツが新しい位置にジャンプします。同様に、新しいコンテンツが削除されると、次のコンテンツが元に戻ります。次のコンテンツの新しい位置をアニメートする方法がありますか？

<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が道のほとんどを私を得た、とthis blog postは行方不明の作品でした。

ソリューション：

1. のdiv
2. の内側にボタンを入れ0px
3. にdiv要素の初期max-heightを設定し、ボタンがにあるときのdivのmax-heightプロパティ
4. の移行を指定します表示するには、
の max-heightプロパティを増やす

更新コード：

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