ngAnimate dejó de funcionar en AngularJS 1.6.4

Tengo una aplicación simple con una animation css simple que funciona como un encanto en AngularJS 1.2.2 + ngAnimate 1.2.2 :

-> Runnable demo funciona como un encanto.

Por (tal vez) no hay razón por la que los mismos códigos no funcionen con AngularJS 1.6.4 + ngAnimate 1.6.4 :

-> Demo de animation rota

Las classs de css animation no fueron agregadas. No hay ningún error en la console. No puedo entender qué está mal aquí. Tenga en count que $scope.pictures es datos ficticios.

Ver

 <!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> 

Aplicación AngularJS

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

Estilos

 .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); } 

Creo que cambiaron la forma en que se agregan las classs de animation, ahora si una matriz ya está inicializada con datos, no establecerá la class ng-enter , por lo que la única forma de evitar esto es configurar la matriz para que esté vacía y agregar un ligero se acabó el time.

 /*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://img.javascriptes.com/javascript/MK2_Granade_full.png", "http://img.javascriptes.com/javascript/aberry-logo.jpg", "http://img.javascriptes.com/javascript/logo-aberry.png", "http://img.javascriptes.com/javascript/Crystal_balls.jpg", "http://img.javascriptes.com/javascript/Purple_sun.jpg", "http://img.javascriptes.com/javascript/planets.jpg", "http://img.javascriptes.com/javascript/d3d.jpg", "http://img.javascriptes.com/javascript/bpg-logo.png", "http://www.d3d.sk/images/Logo - Bukona.jpg", "http://img.javascriptes.com/javascript/sky_up_fire.jpg", "http://img.javascriptes.com/javascript/plexus.jpg", "http://img.javascriptes.com/javascript/dch.jpg", "http://img.javascriptes.com/javascript/Dimonsium-front-a.jpg", "http://img.javascriptes.com/javascript/DWTS-3.jpg", "http://www.d3d.sk/images/Dwts-networkingesign-1.png", "http://img.javascriptes.com/javascript/diplom.jpg", "http://img.javascriptes.com/javascript/Genessis.jpg", "http://www.d3d.sk/images/Genessis - logo-final.jpg", "http://www.d3d.sk/images/Genessis - logo.jpg", "http://img.javascriptes.com/javascript/Goholor.jpg", "http://img.javascriptes.com/javascript/iron.jpg", "http://img.javascriptes.com/javascript/bg_body3.jpg", "http://img.javascriptes.com/javascript/bg_body4.jpg", "http://img.javascriptes.com/javascript/lampa-2.png", "http://img.javascriptes.com/javascript/MaxEnergy-design.jpg", "http://img.javascriptes.com/javascript/North-first-2.jpg", "http://www.d3d.sk/images/North Side Dres - ver 1c.jpg", "http://img.javascriptes.com/javascript/oznamko-16.jpg", "http://img.javascriptes.com/javascript/oznamko-17.jpg", "http://img.javascriptes.com/javascript/Verzia4e.jpg", "http://img.javascriptes.com/javascript/Svk-dres.jpg", "http://img.javascriptes.com/javascript/Rool-up04bc.jpg", "http://img.javascriptes.com/javascript/Senica-letak-maly.jpg", "http://www.d3d.sk/images/Merkur - dizajn - 4.jpg", "http://img.javascriptes.com/javascript/Trades-world-2.jpg", "http://img.javascriptes.com/javascript/web-1.jpg", "http://img.javascriptes.com/javascript/web-3.jpg", "http://img.javascriptes.com/javascript/web-5.jpg", "http://img.javascriptes.com/javascript/web-7.jpg", "http://img.javascriptes.com/javascript/web-8.jpg", "http://img.javascriptes.com/javascript/web-10.jpg", "http://img.javascriptes.com/javascript/web-11.jpg", "http://img.javascriptes.com/javascript/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: networking; } /* 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>