在ng视图ng动画期间设置body样式

我使用ng-view和ng-animate，如下所示：

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处于活动状态，都需要将样式应用于实体，而当视图动画不再处于活动状态时，应该删除该样式。我到底是怎么做到的？

我自己也尝试过一段时间，如果你添加和删除类，它会很好地工作，但ng视图的独特之处在于它是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();
        }
      });
    },
    ...

当ng视图处于活动状态时，我可能会研究像jQuery这样的东西来向主体添加一个类。

你也可以看看ngAnimate，它完美地解释道：链接到ngAnimate 的精确描述

相关内容

最新更新

热门标签：