Question

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

// app/js/controllers.js

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

它只返回一个类名（'pageBg'在每个Controller中分别定义），应该应用于正文：

// 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();
                }
            };
        }
    }})

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

Answer 1

当您使用ng-enter等指令时，

ng-leave和ng-show会被应用。在这种情况下，您只是应用了一种风格，因此您可以实现您正在尝试使用body的背景元素上的简单CSS转换：

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

我建议this article更全面地了解Angular动画。

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

然后你将使用角度UI-Router设置一个进入和离开以及一个resolove。像这样：

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


}]);

希望这是一个很好的例子，可以帮助您了解基础知识。您也可以将颜色或网址传递到您的工厂，这样您就可以指定在出路时改变身体的背景，以及进入方式......等等...

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

2 个答案: