CODEWITHSUNDEEP
javascriptjqueryangularjs
Prashobh
Prashobh

Reputation: 9544

Ng animate in angular js

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

Upvotes: 0

Views: 1242

Answers (2)

checketts
checketts

Reputation: 15003

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

Upvotes: 1

Jon7
Jon7

Reputation: 7225

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.

Upvotes: 0

Related Questions