Question

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

我尝试使用上面的代码，但没有工作，请建议采用角度方式

Answer 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

Answer 2

使用

ngAnimate（至少在1.1.5中）将动画添加到现有指令中。如果您查看ngAnimate documentation，您会注意到支持的指令列表。将它与其中一个指令结合使用即可获得动画。

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

角js中的Ng动画

2 个答案: