ngAnimate 在 AngularJS 1.6.4 中停止工作答案

【问题标题】：ngAnimate stopped working in AngularJS 1.6.4ngAnimate 在 AngularJS 1.6.4 中停止工作
【发布时间】：2018-02-20 19:26:11
【问题描述】：

我有一个简单的应用程序，带有一个简单的 css 动画，它在 `AngularJS 1.2.2` + `ngAnimate 1.2.2` 中就像一个魅力：

-> Runnable demo 就像一个魅力。

因为（也许）没有理由相同的代码不适用于`AngularJS 1.6.4` + `ngAnimate 1.6.4`：

-> Broken animation demo

没有添加动画css 类。控制台没有错误。我无法弄清楚这里出了什么问题。请注意$scope.pictures 是虚拟数据。

查看

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
        <link rel="stylesheet" href="./style.css">
        <script src="app.js"></script> 
        <title></title>
    </head>
    <body ng-app="portfolio">
        <div class="gallery" ng-controller="galleryController">
          <div class="appear" ng-repeat="picture in pictures"></div>
        </div>
    </body>
</html>

AngularJS 应用程序

/*global angular, console*/
var app = angular.module('portfolio', ['ngAnimate']);
(function() {
  "use strict";
  /* Gallery Controller */
  app.controller('galleryController', function(
      $scope
    ) {
      $scope.pictures = [
          "http://www.d3d.sk/images/MK2_Granade_full.png",
          "http://www.d3d.sk/images/aberry-logo.jpg",
          "http://www.d3d.sk/images/logo-aberry.png",
          "http://www.d3d.sk/images/Crystal_balls.jpg",
          "http://www.d3d.sk/images/Purple_sun.jpg",
          "http://www.d3d.sk/images/planets.jpg",
          "http://www.d3d.sk/images/d3d.jpg",
          "http://www.d3d.sk/images/bpg-logo.png",
          "http://www.d3d.sk/images/Logo - Bukona.jpg",
          "http://www.d3d.sk/images/sky_up_fire.jpg",
          "http://www.d3d.sk/images/plexus.jpg",
          "http://www.d3d.sk/images/dch.jpg",
          "http://www.d3d.sk/images/Dimonsium-front-a.jpg",
          "http://www.d3d.sk/images/DWTS-3.jpg",
          "http://www.d3d.sk/images/Dwts-redesign-1.png",
          "http://www.d3d.sk/images/diplom.jpg",
          "http://www.d3d.sk/images/Genessis.jpg",
          "http://www.d3d.sk/images/Genessis - logo-final.jpg",
          "http://www.d3d.sk/images/Genessis - logo.jpg",
          "http://www.d3d.sk/images/Goholor.jpg",
          "http://www.d3d.sk/images/iron.jpg",
          "http://www.d3d.sk/images/bg_body3.jpg",
          "http://www.d3d.sk/images/bg_body4.jpg",
          "http://www.d3d.sk/images/lampa-2.png",
          "http://www.d3d.sk/images/MaxEnergy-design.jpg",
          "http://www.d3d.sk/images/North-first-2.jpg",
          "http://www.d3d.sk/images/North Side Dres - ver 1c.jpg",
          "http://www.d3d.sk/images/oznamko-16.jpg",
          "http://www.d3d.sk/images/oznamko-17.jpg",
          "http://www.d3d.sk/images/Verzia4e.jpg",
          "http://www.d3d.sk/images/Svk-dres.jpg",
          "http://www.d3d.sk/images/Rool-up04bc.jpg",
          "http://www.d3d.sk/images/Senica-letak-maly.jpg",
          "http://www.d3d.sk/images/Merkur - dizajn - 4.jpg",
          "http://www.d3d.sk/images/Trades-world-2.jpg",
          "http://www.d3d.sk/images/web-1.jpg",
          "http://www.d3d.sk/images/web-3.jpg",
          "http://www.d3d.sk/images/web-5.jpg",
          "http://www.d3d.sk/images/web-7.jpg",
          "http://www.d3d.sk/images/web-8.jpg",
          "http://www.d3d.sk/images/web-10.jpg",
          "http://www.d3d.sk/images/web-11.jpg",
          "http://www.d3d.sk/images/vizitka.jpg"
        ];
    });
}());

样式

.appear.ng-enter {
    transition: 0.5s linear transform, 0.8s linear opacity;
    opacity: 0;
    transform: scale(0);
}

.appear.ng-enter.ng-enter-active {
    opacity: 1;
    transform: scale(1);
}

【问题讨论】：

标签： javascript css angularjs ng-animate

【解决方案1】：

我相信他们改变了添加动画类的方式，现在如果一个数组已经用数据初始化，它不会设置类ng-enter，所以解决这个问题的唯一方法是将你的数组设置为空并且添加轻微的超时。

/*global angular, console*/
var app = angular.module('portfolio', ['ngAnimate']);
(function() {
  "use strict";
  /* Gallery Controller */
  app.controller('galleryController', function(
    $scope,
    $timeout
  ) {
    $scope.pictures = [];

    $timeout(function() {
      $scope.pictures = [
        "http://www.d3d.sk/images/MK2_Granade_full.png",
        "http://www.d3d.sk/images/aberry-logo.jpg",
        "http://www.d3d.sk/images/logo-aberry.png",
        "http://www.d3d.sk/images/Crystal_balls.jpg",
        "http://www.d3d.sk/images/Purple_sun.jpg",
        "http://www.d3d.sk/images/planets.jpg",
        "http://www.d3d.sk/images/d3d.jpg",
        "http://www.d3d.sk/images/bpg-logo.png",
        "http://www.d3d.sk/images/Logo - Bukona.jpg",
        "http://www.d3d.sk/images/sky_up_fire.jpg",
        "http://www.d3d.sk/images/plexus.jpg",
        "http://www.d3d.sk/images/dch.jpg",
        "http://www.d3d.sk/images/Dimonsium-front-a.jpg",
        "http://www.d3d.sk/images/DWTS-3.jpg",
        "http://www.d3d.sk/images/Dwts-redesign-1.png",
        "http://www.d3d.sk/images/diplom.jpg",
        "http://www.d3d.sk/images/Genessis.jpg",
        "http://www.d3d.sk/images/Genessis - logo-final.jpg",
        "http://www.d3d.sk/images/Genessis - logo.jpg",
        "http://www.d3d.sk/images/Goholor.jpg",
        "http://www.d3d.sk/images/iron.jpg",
        "http://www.d3d.sk/images/bg_body3.jpg",
        "http://www.d3d.sk/images/bg_body4.jpg",
        "http://www.d3d.sk/images/lampa-2.png",
        "http://www.d3d.sk/images/MaxEnergy-design.jpg",
        "http://www.d3d.sk/images/North-first-2.jpg",
        "http://www.d3d.sk/images/North Side Dres - ver 1c.jpg",
        "http://www.d3d.sk/images/oznamko-16.jpg",
        "http://www.d3d.sk/images/oznamko-17.jpg",
        "http://www.d3d.sk/images/Verzia4e.jpg",
        "http://www.d3d.sk/images/Svk-dres.jpg",
        "http://www.d3d.sk/images/Rool-up04bc.jpg",
        "http://www.d3d.sk/images/Senica-letak-maly.jpg",
        "http://www.d3d.sk/images/Merkur - dizajn - 4.jpg",
        "http://www.d3d.sk/images/Trades-world-2.jpg",
        "http://www.d3d.sk/images/web-1.jpg",
        "http://www.d3d.sk/images/web-3.jpg",
        "http://www.d3d.sk/images/web-5.jpg",
        "http://www.d3d.sk/images/web-7.jpg",
        "http://www.d3d.sk/images/web-8.jpg",
        "http://www.d3d.sk/images/web-10.jpg",
        "http://www.d3d.sk/images/web-11.jpg",
        "http://www.d3d.sk/images/vizitka.jpg"
      ];
    })

  });
}());

/* gallery mosaic - grid */

.gallery {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
}

.gallery img {
  width: 100%;
  padding: 7px 0;
}

.appear {
  height: 150px;
  width: 150px;
  margin: 5px;
  background-color: red;
}


/* gallery mosaic - animate appearance  */

.appear.ng-enter {
  transition: 0.5s linear transform, 0.8s linear opacity;
  opacity: 0;
  transform: scale(0);
}

.appear.ng-enter.ng-enter-active {
  opacity: 1;
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>

<body ng-app="portfolio">
  <div class="gallery" ng-controller="galleryController">
    <div class="appear" ng-repeat="picture in pictures"></div>
  </div>
</body>

显然，您可以将此超时更改为适合您的时间。

【讨论】：

谢谢，到目前为止。超时解决方案是客户端性能深度，不是吗？
@lin 好吧，我已将超时设置为 1 毫秒，而且它似乎仍在运行，所以我要说不。我认为这只是一个角度问题，这个数组需要先为空，然后再更改。
好吧，只需添加一个timeout -> plnkr.co/edit/cE5PM2a8xwvuiCnwii9q?p=preview 似乎就可以解决它。这太疯狂了。为什么会发生这种情况？
@lin $timeout with 0 delay 只会触发新的摘要周期，所以假设它的解决方法

我有一个简单的应用程序，带有一个简单的 css 动画，它在 AngularJS 1.2.2 + ngAnimate 1.2.2 中就像一个魅力：

因为（也许）没有理由相同的代码不适用于AngularJS 1.6.4 + ngAnimate 1.6.4：

查看

AngularJS 应用程序

样式

我有一个简单的应用程序，带有一个简单的 css 动画，它在 `AngularJS 1.2.2` + `ngAnimate 1.2.2` 中就像一个魅力：

因为（也许）没有理由相同的代码不适用于`AngularJS 1.6.4` + `ngAnimate 1.6.4`：