滑動/向上ngAnimate？

Question

我想添加簡單的幻燈片完成/向上動畫。例如，如果您轉到Fiddle，您可以看到左側面板，您可以在其中添加外部資源，Ajax請求等。如果點擊其中一些可以看到簡單的動畫幻燈片效果。我試圖達到的是有點相似。我有一個HTML按鈕：

<button class="checkbox-button btn btn-primary" ng-click="updateActiveTypeBox(true)">{{typeBoxMessage}}</button> 

這裏是我的複選框格：

<div ng-show="activeTypeBox"> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox" ng-model="selectAll.selected" ng-click="checkAll()" />Check All 
     </label> 
     <label ng-repeat="carType in carTypeObj"> 
      <input type="checkbox" ng-model="carType.selected" /> {{carType.type}} 
     </label> 
    </div> 
</div> 

當你點擊按鈕，activeTypeBox設置爲true，所以ng-show="activeTypeBox"通行證。當您再次單擊此按鈕時，activeTypeBox設置爲false，因此ng-show="activeTypeBox"失敗。我需要添加的唯一東西是向下/向上滑動動畫。我更喜歡使用Angular-Animate，因爲它是使用角碼的庫。我試圖找到解決方案，但沒有找到符合我要求的解決方案。

Answer 1

編輯：

看起來它可以用CSS來實現：

.animate-show { 
    line-height:20px; 
    opacity:1; 
    padding:10px; 
    border:1px solid black; 
    background:white; 
} 

.animate-show.ng-hide-add.ng-hide-add-active, 
.animate-show.ng-hide-remove.ng-hide-remove-active { 
    -webkit-transition:all linear 0.5s; 
    transition:all linear 0.5s; 
} 

.animate-show.ng-hide { 
    line-height:0; 
    opacity:0; 
    padding:0 10px; 
} 

所以只需添加class="animate-show"的DIV

https://docs.angularjs.org/api/ng/directive/ngShow#usage_animations

工作示例：

http://plnkr.co/edit/xmkBjvPY5OjFLnxcuVKz?p=preview&s=jBzeCEpWphlOpSRv