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