Javascript 如何在angular js中设置动画？

我需要在角Js动画。我用谷歌搜索了一下。但是我不能得到 这是实现这一目标的完美方式

     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

html
js:
$scope.hideSampleList=函数（$event）{
if（$（$event.currentTarget）.hasClass（“向下”））{
$（$event.currentTarget）.next（）.hide（300）；
}
否则{
$（$event.currentTarget）.removeClass（“up”）；
$（$event.currentTarget）.addClass（“down”）；
}
}
我使用了jqueryanimate。
这里我如何在angular js中设置动画（显示和隐藏）。
谁能给我指路吗

......
/*角度动画类*/
.animate-if.ng-enter、.animate-if.ng-leave{
-webkit过渡：全立方贝塞尔（0.250,0.460,0.450,0.940）0.2s；
-莫兹变换：全立方贝塞尔（0.250,0.460,0.450,0.940）0.2s；
-o过渡：全立方贝塞尔（0.250,0.460,0.450,0.940）0.2s；
过渡：全立方贝塞尔（0.250,0.460,0.450,0.940）0.2s；
}
.设置动画-if.ng-enter，
.设置动画-if.ng-left.ng-left-active{
不透明度：0；
}
.动画化-if.ng-leave，
.设置动画-if.ng-enter.ng-enter-active{
不透明度：1；
}
/*输入动画的起始CSS样式*/
.淡入淡出{
-webkit过渡：0.5s线性全部；
-moz过渡：0.5s线性全；
-o型过渡：0.5s线性全；
过渡：0.5s线性所有；
不透明度：0；
}
/*输入动画的完成CSS样式*/
.fade.ng-enter.ng-enter-active{
不透明度：1；
}

Downvote，因为它是

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