AngularJS如何為身體背景（CSS或JS）設置動畫？

Question

當視圖更改時，我想為背景圖像設置動畫。 背景圖像當前由MainController中定義的函數設置-看起來像這樣：

// app/js/controllers.js

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

它只是返回一個應該應用於主體的類名（在每個Controller中分別定義了“ 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();
                }
            };
        }
    }})

我認為這將是一件容易的事，但不幸的是，這似乎對我來說很難。

Answer 1

在使用ng-show等指令時會應用ng-enter和ng-leave 。在這種情況下，您只是在應用樣式，因此您可以在后台通過簡單的CSS過渡來實現您想要的功能身體元素：

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

我推薦這篇文章，以更全面地了解Angular動畫。

Answer 2

您必須創建一個動畫背景的工廠，完成后工廠需要返回承諾。 然后，使用類似Angular UI-Router的工具，您可以在更改視圖之前請求Promise。 這是我的頁腳在過渡視圖時為打開和關閉設置動畫的概念的示例。

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


}]);

希望這是一個足夠好的示例，可以幫助您了解基礎知識。 您還可以將顏色或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