在ng-view ng-animate期间设置body样式
我在ng-animate中使用ng-view，如下所示：
HTML
<body>
<div ng-view></div>
</body>CSS
.view.ng-enter,
.view.ng-leave { transition: all 600ms ease-out; }
.view.ng-enter {
position: absolute;
top:0; left:240px;
width: 100%;
opacity: 0; }
.view.ng-enter.ng-enter-active {
opacity: 1;
left: 0; }
.view.ng-leave {
position: relative;
left: 0;
opacity: 1; }
.view.ng-leave.ng-leave-active {
opacity: 0;
left: -240px; }现在，在我的应用程序中，有一些链接可以改变视图。视图更改的动画效果非常好。
现在，我想在视图更改时向实体中添加动画。因此，基本上，只要.view.ng-view处于活动状态，就需要将样式应用于body，当视图动画不再活动时，应删除该样式。我到底该怎么做呢？
回答 2
Stack Overflow用户
发布于 2014-11-04 07:12:18
我自己已经尝试了一段时间了，如果你在添加和删除类，它工作得很好，但对于ng-view，它的独特之处在于它是2个路由的过渡，我还没有看到任何与发射器或任何东西相关的东西。不过，您有几个选择。
这是一个plunker；
1)简单的答案是添加和删除带有$timeout的动画，其持续时间与.view的css相同。
$rootScope.$on('$routeChangeSuccess', function(e, curr, prev) {
var body = $document.find('body');
$animate.addClass(body, 'overlay');
$timeout(function() {
$animate.removeClass(body, 'overlay');
}, 1000);2)另一种方式是在enter函数内部，您可以在完成回调之前放一些东西，比如本例中的jQuery或TweenMax。
app.animation('.view', function() {
return {
enter: function(element, done) {
TweenMax.from(element, 1, {
color: 'red',
onComplete: function() {
$log.debug('done');
done();
}
});
},
...Stack Overflow用户
发布于 2014-11-04 02:13:25
当ng-view处于活动状态时，我可能会查看jQuery之类的内容，以便在主体中添加一个类。
您还可以查看ngAnimate，它完美地解释了：link to a very precise description of ngAnimate
https://stackoverflow.com/questions/26718788
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号