I have a simple application with simple css animation that works like a charm in AngularJS 1.2.2 + ngAnimate 1.2.2 :
-> Runnable demo works like a charm.
For (maybe) there are no reasons why the same codes do not work with AngularJS 1.6.4 + ngAnimate 1.6.4 :
-> Broken animation demo
The css animated classes have not been added. There are no errors in the console. I cannot understand what is wrong here. Note that $scope.pictures is dummy data.
View
<!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 app
/*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" ]; }); }());
Styles
.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); }