如何在角度js中制作动画？答案

【问题标题】：How to animate in angular js?如何在角度js中制作动画？
【发布时间】：2016-08-31 12:27:44
【问题描述】：

我需要在 angular-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

【问题讨论】：

投反对票，因为它与 this 重复

标签： javascript angularjs animation jquery-animate css-animations

【解决方案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>

【讨论】：