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

【问题标题】：AngularJS how to animate body background (CSS or JS)?AngularJS如何为身体背景设置动画（CSS或JS）？
【发布时间】：2014-08-09 19:08:34
【问题描述】：

我想在视图更改时为背景图像设置动画。背景图像当前由 MainController 中定义的函数设置 - 它看起来像这样：

// app/js/controllers.js

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

它只返回一个类名（'pageBg' 分别在每个控制器中定义）应该应用于主体：

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

CSS 类看起来像这样：

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

我尝试了 CSS 和 JS 的方法来解决这个问题，但没有成功。

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（使用 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();
                }
            };
        }
    }})

我认为这将是一项简单的任务，不幸的是，这对我来说似乎很难。

【问题讨论】：

我认为 // app/css/animations.css 并不完全在您的 CSS 中。因为它不是行注释，而是下一个构造注释（注释为/* */）。 // 会注释掉你的 .bg-intro.ng-enter part。
如果每个控制器中定义的 pageBg 值不是 bg-intro 并且您的样式表中只有 bg-intro，我相信您的动画将无法正常工作。
@PhilippeBlayo：它不在 animate.css 中 - 我在这里手动添加了它。感谢您指出这一点 - 这可能会造成混淆。
@ArnelleBalane：是的，我在这里只放了一部分 CSS 代码 - 我为每个视图类定义了这些动画（在原始文件中）。
我用过 Greensock ，我更喜欢用 CSS ，因为它更流畅

标签： javascript css angularjs animation gsap

【解决方案1】：

ng-enter 和 ng-leave 在您使用 ng-show 等指令时应用。在这种情况下，您只是应用样式，因此您可以通过简单的 CSS 过渡来实现您想要做的事情在 body 的背景元素上：

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

我推荐 this article 以获得更完整的 Angular 动画概述。

【讨论】：

感谢您的回答。我以前读过这篇文章，但我无法应用这些想法来解决我的问题。至于你的解决方案，它实际上只适用于页面刷新（ctrl+r）而不是当我切换视图时（没有动画然后）。
那个网站还在吗？

【解决方案2】：

您必须创建一个为您的背景设置动画的工厂，并且在完成时工厂需要返回一个承诺。然后使用 Angular UI-Router 之类的东西，您可以在更改视图之前请求一个承诺。下面是我在页脚中使用相同概念的示例，用于在转换视图时为打开和关闭设置动画。

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

然后，您将使用 Angular UI-Router 来设置进入和离开以及解析。像这样：

'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) {


}]);

希望这是一个足够好的示例来帮助您了解基础知识。您还可以将颜色或 url 传递给您的工厂，这样您就可以指定在退出时更改的主体背景，以及进入的方式等...

【讨论】：