0

我需要用动画效果显示 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>

css

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

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

我尝试使用上面的代码，但不工作，请建议一种角度方式

4

2 回答 2

1

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

此外，在 Angular 1.2 中，基于 ngClass 的动画也可以工作。Moo 年有一篇很棒的示例文章：http ://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

于 2013-08-22T03:33:02.853 回答
0

ngAnimate用于（至少在 1.1.5 中）将动画添加到现有指令。如果您查看ngAnimate 文档，您会注意到支持的指令列表。将它与这些指令之一结合使用以获取动画。

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

于 2013-08-21T06:54:51.443 回答