AngularJS如何为身体背景（CSS或JS）设置动画？

Question

I'd like to animate background image when the view changes. 当视图更改时，我想为背景图像设置动画。 Background image is currently set by a function which is defined in MainController - it looks like that: 背景图像当前由MainController中定义的函数设置-看起来像这样：

// app/js/controllers.js

$scope.getBg = function() {
  return $route.current.scope.pageBg || 'bg-intro';
};

it just returns a class name ('pageBg' is defined in each Controller separately) which should be applied to the body: 它只是返回一个应该应用于主体的类名（在每个Controller中分别定义了“ pageBg”）：

// app/index.html
<body ng-class="getBg()">
...
</body>

The CSS classes looks something like that: CSS类看起来像这样：

.bg-intro {
  background: #4d4638 url(../img/home.jpg) no-repeat top center;
}

I tried both CSS and JS ways to solve this but without success. 我尝试了CSS和JS两种方法来解决此问题，但均未成功。

CSS: CSS：

/* app/css/animations.css */

.bg-intro.ng-enter,
.bg-intro.ng-leave {
background: #ffffff;
}

.bg-intro.ng-enter {
animation: 0.5s fade-in;
}

.bg-intro.ng-leave {
animation: 0.5s fade-out;
}

@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}

JS (with Greensock): JS（带有Greensock）：

.animation('.bg-intro', function() {
    return {
        enter: function(element, done) {
            TweenMax.set(element, { backgroundColor:"#ffffff"});
            TweenMax.from(element, .5, {alpha:0, ease:Power2.easeInOut, onComplete:done});

            return function(cancel) {
                if(cancel) {
                    element.stop();
                }
            };
        },

        leave: function(element, done) {
            TweenMax.set(element, { backgroundColor:"#ffffff"});
            TweenMax.to(element, .5, {alpha:0, ease:Power2.easeInOut, onComplete:done});

            return function(cancel) {
                if(cancel) {
                    element.stop();
                }
            };
        }
    }})

I thought that this would be an easy task and unfortunately it appeares to be to hard for me. 我认为这将是一件容易的事，但不幸的是，这似乎对我来说很难。

Answer 1

ng-enter and ng-leave are applied when you're using directives like ng-show etc. In this case, you're just applying a style, so you can achieve what you are trying to do with simple CSS transition on the background element for body: 在使用ng-show等指令时会应用ng-enter和ng-leave 。在这种情况下，您只是在应用样式，因此您可以在后台通过简单的CSS过渡来实现您想要的功能身体元素：

body{
  transition: background ease-in-out 0.5s;
}

I recommend this article for a more complete overview of Angular animations. 我推荐这篇文章，以更全面地了解Angular动画。

Answer 2

You must create a factory that animates your background, and on complete the factory needs to return a promise. 您必须创建一个动画背景的工厂，完成后工厂需要返回承诺。 Then using something like Angular UI-Router, you can request a promise before changing views. 然后，使用类似Angular UI-Router的工具，您可以在更改视图之前请求Promise。 Here is an example of the same concepts that I use for my footer to animate open and close when transitioning views. 这是我的页脚在过渡视图时为打开和关闭设置动画的概念的示例。

angular.module('App.factory', []).factory("footerUtility", function($window){
var element = document.getElementById('footer-wrapper');
return {
    open : function() {
        TweenMax.to(element,1, {
            delay:1.5,
            maxHeight: '300',
            height: 'auto',
            width: '100%',
            marginTop:'0px',
            overflow: 'hidden',
            ease: Cubic.easeInOut
        });


    },
    close : function(deferred) {
        TweenMax.to(element, .500, { delay:0,maxHeight: 0, height: 0,width: '100%', overflow: 'hidden', ease: Cubic.easeInOut,
            onComplete:function(){
                $window.scrollTo(0,0);
                deferred.resolve('complete');
            }});
    }
}
});

Then you would use angular UI-Router to set a enter and leave and a resolove. 然后，您将使用角度UI-Router设置进入和离开以及resolove。 like so: 像这样：

'use strict';
angular.module('App.home', [])
.config(
['$stateProvider', '$locationProvider', '$urlRouterProvider',
    function ($stateProvider, $locationProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');

        $stateProvider.state("home", {
            abstract: false,
            url: "/home",
            controller: 'homeCtrl',
            templateUrl: 'partials/home.html',
            onExit: ['footerUtility'],
            onEnter: ['footerUtility',
                function (footerUtility) {
                    footerUtility.open();
                }],
            resolve:['footerUtility', '$q', function(footerUtility, $q){
                var deferred = $q.defer();
                footerUtility.close(deferred);
                return deferred.promise;
            }]
        })
    }]
).controller('homeCtrl', ['$scope','$stateParams', '$http', '$location', '$timeout', function($scope, $stateParams, $http, $location, $timeout) {


}]);

Hopefully this is a good enough example to get you going with the basics. 希望这是一个足够好的示例，可以帮助您了解基础知识。 you could also pass a color or url into your factory so you could specify the background of the body changing on the way out, and the way in, etc... 您还可以将颜色或url传递到您的工厂中，以便您可以指定在出门，进路等过程中更改的主体背景。

AngularJS如何为身体背景（CSS或JS）设置动画？

问题描述

2 个解决方案

解决方案1
1 2014-08-09 23:17:54

解决方案2
0 2016-03-18 16:41:24

AngularJS如何为身体背景（CSS或JS）设置动画？

问题描述

2 个解决方案

解决方案1 1 2014-08-09 23:17:54

解决方案2 0 2016-03-18 16:41:24

解决方案1
1 2014-08-09 23:17:54

解决方案2
0 2016-03-18 16:41:24