使用类、ng-show 和 ng-class 执行 AngularJS 动画答案

【问题标题】：Execute AngularJS animation using class, ng-show and ng-class使用类、ng-show 和 ng-class 执行 AngularJS 动画
【发布时间】：2015-03-30 22:23:23
【问题描述】：

我对 Angular 很陌生，所以我担心你需要指出我正确的方向。我正在尝试使用 AngularJS 执行 CSS 动画。

如果您查看原始代码，可以很容易地执行 CSS 动画，请看这个 plunker：

http://plnkr.co/edit/MCY3FOV7qLk7YfyzJfob?p=preview

但是，问题在于这是通过 css 类属性工作的：sample-show-hide

让我们看看下面的 HTML：

<body ng-app="ngAnimate">
  <div ng-init="checked=true">
  <label>
    <input type="checkbox" ng-model="checked" style="float:left; margin-    right:10px;"> Is Visible...
   </label>
  <div class="check-element" ng-class="{'sample-show-hide': }" ng-show="checked"     style="clear:both;">
    Visible...
  </div>
  </div>
</body>

但是现在，我希望通过 ng-class 指令设置动画的类，但不幸的是，动画不再起作用了。

请看一下这个插件：http://plnkr.co/edit/MCY3FOV7qLk7YfyzJfob?p=preview

【问题讨论】：

标签： javascript jquery css angularjs animation

【解决方案1】：

我投入了一些时间，我想我至少部分解决了您的问题：

首先，您的 plnkr 链接都链接到相同的 plnkr 和相同的版本，这不是很有帮助，因为我看不出有什么区别。此外，您的 plnkr 中的最新版本存在一些错误（例如，未将 ngAnimate 注入您的 Angular 应用程序）。

您的动画不起作用的主要原因实际上是您的 CSS 代码。你应该阅读它是如何工作的here。

我从this stackoverflow 答案中获取了一个可用的 CSS，并在您的代码中使用了它。

我的代码现在看起来像这样： index.html：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Example - example-example3-production</title>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
    <link href="animations.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="controller.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular-animate.js"></script>
  </head>

  <body ng-app="OfficeUI" ng-controller="OfficeUIController as OficeUI">
    <div>
      <label>
        <input type="checkbox" style="float:left; margin-right:10px;" ng-click="isActive()"/>
 Is Visible...
  </label>
      <div class="sample-show-hide" ng-class="'reveal-animation'" ng-show="trigger" style="clear:both;">
    Visible...
  </div>
    </div>
  </body>

</html>

controller.js：

var OfficeUI = angular.module('OfficeUI', ['ngAnimate']);

// Defines the AngularJS 'OfficeUI' controller.
OfficeUI.controller('OfficeUIController', ['$scope', function($scope) {
    $scope.isActive = function(){
      $scope.trigger = !$scope.trigger;
      console.log($scope.trigger);
    };
    $scope.trigger = false;
}]);

动画.css：

body { font-family: 'Segoe UI'; color: #444; }

.sample-show-hide{
  padding:10px;
  border:1px solid black;
  background-color:white;
}


.reveal-animation.ng-hide.ng-hide-add-active {
    display: block !important;
}
.reveal-animation.ng-hide-remove {
    -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
    animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
.reveal-animation.ng-hide-add {
    -webkit-animation: leave_sequence 1s linear; /* Safari/Chrome */
    animation: leave_sequence 1s linear; /* IE10+ and Future Browsers */
}

@-webkit-keyframes enter_sequence {
    0% { opacity:0; }
    100% { opacity:1; }
}
@keyframes enter_sequence {
    0% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes leave_sequence {
    0% { opacity:1; }
    100% { opacity:0; }
}

@keyframes leave_sequence {
    0% { opacity:1; }
    100% { opacity:0; }
}

我分叉了（两次意外：D）你的 plnkr here.

【讨论】：