ngAnimate слайд вниз/вверх с нефиксированной высотой

Question

Я хотел бы создать простую анимацию слайда вниз/вверх для div. Проблема в том, что он работает только тогда, когда div имеет фиксированную высоту.

index.html

<div id="guildDetails" class="animate-show" ng-show="guildDetails.show"> 
</div> 

style.css

.ng-hide-add, .ng-hide-remove { 
    display: block !important; 
} 
.animate-show { 
    transition: .3s linear all; 
    height: 500px; 
    overflow: hidden; 
} 
.animate-show.ng-hide { 
    height:0; 
} 

Он просто работает, но содержание в этом DIV не является статичным, так что иногда 500px просто слишком большой, а иногда он слишком мал. Я попытался установить высоту в auto, но, если я ее установлю, то это не сработает.

Как я могу оживить его, если я не хочу использовать фиксированную высоту?

Answer 1

Для решения этой проблемы существует угловой плагин ng-slide-down. Я успешно использовал его в своем проекте для понижения динамического содержимого.

Копирование кода из примера здесь

<div ng-click="widgetExpanded = !widgetExpanded" class="head"> 
    Click to slide in/out 
    </div> 
    <div ng-slide-down="widgetExpanded" lazy-render duration="1"> 
    <div class="content"> 
     Some awesome content here 
    </div> 
    </div> 

Использование ng-slide-down="widgetExpanded" с булевой собственности и обновить его для сдвинув Div вверх и вниз.

JS-Fiddle пример