带动态内容的动态div动画包装 - 没有固定的高度

问题描述:

我是新来角度和建设一个项目。我已经正确地设置了所有的视图/路线,现在正试图“美化”视图之间的转换。我见过的很多演示都使用绝对定位的元素,这使得轻松过渡。带动态内容的动态div动画包装 - 没有固定的高度

我的内容将永远是动态的。有人可以帮助我使包装过渡的高度顺利以及淡化。淡入淡出正在按预期

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

用类似这样的标记

<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