Angular/CSS - 在動態添加新元素時動畫內容的移動

這裏是角度動畫noob。Angular/CSS - 在動態添加新元素時動畫內容的移動

我可以使用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; 
}

來源

2016-03-22 Benny B

這是一個很好的GIF動畫，不幸的是它沒有真正的HTML + CSS或者更好的是不值錢的 - 工作的例子創建 –

這個空間，因爲在最後的位置等待元素動畫結束。當它相反時，它會使該元素消失。您需要先動畫框，然後動畫完成後，開始動畫。您的第二個動畫需要做相反的事情。 – klauskpm

@AlonEitan添加了一些代碼 –

@klauskpm了我大部分的方式存在，並this blog post是缺少的部分。

解決方案：

將按鈕放在一個div
設置div的初始max-height的內部0px
指定的div的max-height財產
過渡當按鈕是顯示，增加max-height div的屬性

更新代碼：

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

來源

2016-03-22 19:26:51

Angular/CSS - 在動態添加新元素時動畫內容的移動

回答

相關問題