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

Execute AngularJS animation using class, ng-show and ng-class

本文关键字：执行 AngularJS 动画 ng-class class ng-show 使用      更新时间：2023-09-26

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

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

首先，您的 plnkr

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

动画不起作用的主要原因实际上是您的CSS代码。您应该在此处阅读它的工作原理。

我从这个堆栈溢出答案中获取了一个有效的 CSS，并在您的代码中使用它。

我的代码现在看起来像这样：索引.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>

控制器.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。

相关文章：