Witam,

zacząłem się bawić biblioteką "angular-animate.js". Mam jednak problem z animacją tła dla <body> (które zmienia się w zależności od widoku). Po któtce wyglada to tak:

[PHP] pobierz, plaintext 
  1. // app/index.html
  2. <body ng-class="getBg()">
  3. ...
  4. </body>
[PHP] pobierz, plaintext

Jak widać zostanie załadowana klasa CSS, którą zwraca powyższa funkcja getBg(), zdefiniowana w głównym kontrolerze:

[PHP] pobierz, plaintext 
  1. // app/js/controllers.js
  2. .controller('MainController', ['$scope', '$location', '$route',
  3. 		function($scope, $location, $route) {
  4.  
  5. 			$scope.getBg = function() {
  6. 				return $route.current.scope.pageBg || 'bg-intro';
  7. 			};
  8. ...
[PHP] pobierz, plaintext

To działa dobrze, tzn. tła się zmieniają. CSS wygląda tak:
[PHP] pobierz, plaintext 
  1. .bg-intro {
  2. 	background: #4d4638 url(../img/tlo-home.jpg) no-repeat top center;
  3. }
  4. .bg-home {
  5. 	background: #4d4638 url(../img/tlo-119752711-karbonizowany-dark.jpg) no-repeat top center ;
  6. }
  7. ...
[PHP] pobierz, plaintext


Chciałbym aby tła zmieniały się płynnie i ładnie, dlatego postanowiłem użyć oficjalnej biblioteki 'angular-animate.js' oraz animacji w CSS lub JS (Greensock) - w obu przypadkach nieskutecznie (nic się nie dzieje). Przeczytałem mnóstwo tutoriali i całą dokumentację (wraz z tutorialem Phonecat i Guidem), lecz nadal nie wiem co zrobić aby to działało...

1. CSS - według dokumentacji wystarczy ustawić klasy ng-enter oraz ng-leave, a więc:
[PHP] pobierz, plaintext 
  1. // app/css/animations.css
  2. .bg-intro.ng-enter,
  3. .bg-intro.ng-leave {
  4.   background: #ffffff;
  5. }
  6.  
  7. .bg-intro.ng-enter {
  8.   animation: 0.5s fade-in;
  9. }
  10.  
  11. .bg-intro.ng-leave {
  12.   animation: 0.5s fade-out;
  13. }
  14.  
  15. @keyframes fade-in {
  16.   from { opacity: 0; }
  17.   to { opacity: 1; }
  18. }
  19.  
  20. @keyframes fade-out {
  21.   from { opacity: 1; }
  22.   to { opacity: 0; }
  23. }
[PHP] pobierz, plaintext


2. JS (Greensock) - tutaj próbowałem w ten sposób:
[PHP] pobierz, plaintext 
  1. // app/js/animations.js
  2. 	.animation('.bg-intro', function() {
  3. 		return {
  4. 			enter: function(element, done) {
  5. 				TweenMax.set(element, { alpha:1, backgroundColor:"#ffffff"});
  6. 				TweenMax.from(element, .5, {alpha:0, top:100, ease:Power2.easeInOut, onComplete:done});
  7.  
  8. 				return function(cancel) {
  9. 					if(cancel) {
  10. 						element.stop();
  11. 					}
  12. 				};
  13. 			},
  14.  
  15. 			leave: function(element, done) {
  16. 				TweenMax.set(element, { alpha:1, backgroundColor:"#ffffff"});
  17. 				TweenMax.to(element, .5, {alpha:0, top:-100, ease:Power2.easeInOut, onComplete:done});
  18.  
  19. 				return function(cancel) {
  20. 					if(cancel) {
  21. 						element.stop();
  22. 					}
  23. 				};
  24. 			}
  25. 		}})
[PHP] pobierz, plaintext


Niestety żadna z powyższych metod nie dziła i tło się zmienia, ale bez animacjii sad.gif Jeśli ktoś byłby tak miły i nakierował mnie na właściwą drogę - będę wdzięczny.

Pozdr.