我想在 View 更改时为背景图像设置动画。背景图像当前由 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();
}
};
}
}})
我认为这将是一项简单的任务，但不幸的是，这对我来说似乎太难了。
最佳答案
ng-enter 和 ng-leave 在您使用 ng-show 等指令时应用。在这种情况下，您只是应用一种样式，这样您就可以通过 body 的背景元素上的简单 CSS 转换来实现您想要做的事情:
body{
transition: background ease-in-out 0.5s;
}
我推荐this article以获得更完整的 Angular 动画概述。
关于javascript - AngularJS 如何为 body 背景设置动画(CSS 或 JS)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25222052/