Fatal编程技术网
  • javascript/
  • Javascript AngularJS如何设置身体背景动画（CSS或JS）？

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

javascript css angularjs animation

Javascript AngularJS如何设置身体背景动画（CSS或JS）？,javascript,css,angularjs,animation,gsap,Javascript,Css,Angularjs,Animation,Gsap,我想在视图更改时设置背景图像的动画。背景图像当前由MainController中定义的函数设置-看起来像： //app/js/controllers.js $scope.getBg=函数（）{ 返回$route.current.scope.pageBg | |'bg intro'； }; 它只返回一个类名（“pageBg”在每个控制器中分别定义），该类名应应用于主体： // app/index.html <body ng-class="getBg()"> ... </body

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

//app/js/controllers.js
$scope.getBg=函数（）{
返回$route.current.scope.pageBg | |'bg intro'；
};
它只返回一个类名（“pageBg”在每个控制器中分别定义），该类名应应用于主体：

// app/index.html
<body ng-class="getBg()">
...
</body>
我尝试了CSS和JS两种方法来解决这个问题，但都没有成功

CSS:

/*app/css/animations.css*/
.bg-intro.ng-enter，
.bg-intro.ng-leave{
背景：#ffffff；
}
.bg-intro.ng-enter{
动画：0.5s淡入；
}
.bg-intro.ng-leave{
动画：0.5s淡出；
}
@关键帧淡入{
从{opacity:0；}
到{opacity:1；}
}
@关键帧淡出{
从{opacity:1；}
到{不透明度：0；}
}
JS（带Greensock）：

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

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

body{
  transition: background ease-in-out 0.5s;
}
我建议您对角度动画进行更完整的概述。

您必须创建一个为背景制作动画的工厂，完成后，工厂需要返回一个承诺。然后使用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传递到你的工厂，这样你就可以指定身体在离开时的背景变化，以及进入的方式等等。

我假设
//app/css/animations.css
在你的css中并不准确。因为它不是行注释，而是下一个构造注释（注释是
/**/
）。
/
会注释掉你的
.bg-intro.ng-enter部分
。如果每个控制器中定义的
pageBg
值不是
bg intro
，并且你的样式表中只有
bg intro
，我相信你的动画不会工作。@PhilippeBlayo:它不在animate.css中-我在这里手动添加了它。谢谢你指出这一点-这可能会让人困惑。@Arnellbalane:是的，我在这里只放了CSS代码的一部分-我为每个视图类（在原始文件中）定义了这些动画。我使用Greensock，我更喜欢使用CSS，因为对于这个答案来说它更平滑。我以前读过这篇文章，但我无法运用这些想法来解决我的问题。。至于你的解决方案，它实际上只在页面刷新（ctrl+r）时起作用，而在我切换视图时不起作用（那时没有动画）。该站点还在运行吗？ 
'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) {


}]);