Question

I need to animate in angular-Js. I googled it. but i can not get a perfect way to achieve this.

     html

           <span class="sb-arrow down" ng-click="hideSampleList($event)"></span>

        js:
            $scope.hideSampleList = function ($event) {
                if ($($event.currentTarget).hasClass("down")) {
                    $($event.currentTarget).next().hide(300);
                }
                else {
                    $($event.currentTarget).removeClass("up");
                    $($event.currentTarget).addClass("down");
                }
            }


        I have used jquery animate.

        Here how can i animate(show and hide) in angular js.

        can anyone please guide me

Answer 1

 <span class="sb-arrow down" ng-click="showMyList=true" ng-hide="showMyList"></span>
 <span class="sb-arrow down" ng-click="showMyList=false" ng-show="showMyList"></span>


<div class="sample-list animate-if" ng-if="showMyList">
......
</div>

<style>
/* Angular animate classes */
.animate-if.ng-enter, .animate-if.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s;
}
.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
  opacity:0;
}
.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
  opacity:1;
}

/* The starting CSS styles for the enter animation */
.fade.ng-enter {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}
</style>

How to animate in angular js?

1 个答案: