Question

我对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指令设置动画类，但不幸的是，动画不再适用。

请看看这个plunker：http://plnkr.co/edit/MCY3FOV7qLk7YfyzJfob?p=preview

Answer 1

我投入了一些时间，我认为我至少部分地解决了你的问题：

首先，你的plnkr链接都链接到同一个plnkr和相同的版本，这不是非常有用，因为我无法真正看到差异。另外，你的plnkr中的最新版本有一些错误（例如没有将ngAnimate注入你的角应用程序）。

您的动画无效的主要原因实际上是您的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;
}]);

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

使用class，ng-show和ng-class执行AngularJS动画

1 个答案: