Question

我正在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处于活动状态，就需要将一个样式应用于正文，当视图动画不再处于活动状态时，应该删除该样式。我该怎么做呢？

Answer 1

我试图找到这个问题一段时间，如果你要添加和删除类，它可以正常工作，但是使用ng-view它的独特之处在于它的2条路线的过渡，并且我没有＆＃39;看到任何与发射器有关的东西。你有几个选择。

这里是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();
        }
      });
    },
    ...

Answer 2

当ng-view处于活动状态时，我会仔细研究类似jQuery的内容，以便为正文添加一个类。

您还可以查看完美解释的ngAnimate： link to a very precise description of ngAnimate

在ng-view ng-animate期间为主体设置样式

2 个答案: