Ng animate in angular js

Question

I need to show the div with animated effect .

 <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;
    }

i tried with above code,but not working ,pls suggest a angular way

checketts · Accepted Answer · 2013-08-22 03:33:02Z

1

As Jon7 mentioned, you can't use ngAnimate with ngClass in Angular 1.1.5. You can use ng-Show though.

Also, in Angular 1.2 ngClass based animations will work. Year of Moo has a great writeup with samples: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

answered Aug 22, 2013 at 3:33

checketts

15.2k11 gold badges59 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon7 · Accepted Answer · 2013-08-21 06:54:51Z

0

ngAnimate is used (at least in 1.1.5) to add animation to an existing directive. If you check out the ngAnimate documentation, you'll notice a list of supported directives. Use it in conjunction with one of these directives to get an animation.

Also, you're specifying that you want to use an animation called "animate." You'll actually need to define an animation with that name in the CSS.

answered Aug 21, 2013 at 6:54

Jon7

7,2352 gold badges35 silver badges39 bronze badges

1 Comment

Jon7 Over a year ago

@prash Read my answer again. ngAnimate only works for a short list of directives out of the box. You're attempting to use it with ngClass which is NOT one of the supported directives, so, of course, it will not work.

Collectives™ on Stack Overflow

Ng animate in angular js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related