滑动/向上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