Javascript Ng在angular js中设置动画

我需要显示动画效果的div

 <div class="appdrawer pull-right tab-{{ showDetails }}" data-ng-click="showDetails = !showDetails; showDetails1 = false; showDetails2 = false;" >Apps</div>


<section id="workbench-apps" data-ng-class="{ 'hidden': ! showDetails }" data-ng-animate=" 'animate' ">
        <div class="rowfluid">
            Apps
            <div class="applist" data-ng-repeat="applist in applists">{{ name }}</div>

        </div>

    </section>

---

我试过上面的代码，但不起作用，请建议使用角度的方式（至少在1.1.5中）将动画添加到现有指令中。如果您签出，您将注意到支持的指令列表。将其与这些指令之一结合使用以获得动画

---

此外，您还指定要使用名为“animate”的动画。实际上，您需要在CSS中定义一个具有该名称的动画。

正如Jon7所述，在Angular 1.1.5中，您不能将ngAnimate与ngClass一起使用。不过你可以使用ng Show

---

此外，在Angular 1.2中，基于类的动画也可以工作。穆奥之年有一篇很好的文章，里面有一些样本：

@prash再次阅读我的答案

ngAnimate

仅适用于开箱即用指令的简短列表。您正试图将它与

ngClass

一起使用，这不是受支持的指令之一，因此，当然，它将不起作用。

.animate,.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    opacity: 0;
    }

    .animate-enter.animate-enter-active {
    opacity: 1;
    }