Анимация обертки динамического 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