帶動態內容的動態div動畫包裝 - 沒有固定的高度

Question

我是新來角度和建設一個項目。我已經正確地設置了所有的視圖/路線，現在正試圖「美化」視圖之間的轉換。我見過的很多演示都使用絕對定位的元素，這使得輕鬆過渡。

我的內容將永遠是動態的。有人可以幫助我使包裝過渡的高度順利以及淡化。淡入淡出正在按預期

http://plnkr.co/edit/KlVfqCxQIE4VBwatuLgc?p=preview

Answer 1

用類似這樣的標記

<div class="wrapper"> 
    <div class="wrapper-inner"> 
     {CONTENT} 
    </div> 
    </div> 

你可以看包裝，內高度的變化，並設置包裝的高度

scope.$watch(
    function() { 

     return innerElement[0].offsetHeight; 
    }, 
    function(value, oldValue) { 

     element.css('height', value+'px'); 

}, true); 

然後用css過渡動畫變化的高度

.wrapper { 
    overflow: hidden; 
    transition: height ease .3s; 
} 

這裏是一個跳牀http://plnkr.co/edit/IiR228W9Z9JFkvdvhVZp