ngView Animation Enter 在第一页加载时不触发

Question

几天来我一直在为我网站上的一个非常微妙的错误而苦苦挣扎，但找不到任何解决方案（也许我在 AngularJs 方面的知识还不够）

我正在使用最新的 angular (v1.6.1)、ngRoute 和 ngAnimate。

当您访问网站时（当网站第一次加载时），ngView 动画输入没有触发。

这是我的代码：

var app = angular.module('app', ['ngAnimate', 'ngRoute']);

app.animation('.view', function () {
  return {
    enter : function (element, done) {
      alert('enter');
      done();
    },
    leave : function (element, done) {
      alert('leave');
      done();
    }
  }
});

//Config

app.config(function ($routeProvider, $locationProvider, $httpProvider){

  $routeProvider.when('/test.php',{
    template : function () {
      return "<div>Welcome to test page</div>";
    }
  });
  $routeProvider.when('/test.php/:path',{
    template : function () {
      return "<div>Inside page</div>";
    }
  });

  $locationProvider.html5Mode({enabled: true, requireBase: true});
});

我在 GitHub 上看到过这个问题： https://github.com/angular/angular.js/issues/10536

也就是说 "it's a feature, not a bug"。但问题是，在生产网站上，它有时会触发，有时不会（尤其是在 safari 和移动浏览器中）。

例如，当我使模板加载速度变慢时：

$routeProvider.when('/test.php',{
    template : function () {
      return "<div>Welcome to test page</div>";
    },
    resolve: {
      message: function ($timeout, $q) {
        console.log('asdasa')
        return $q(function(resolve){
          $timeout(function () {
            resolve('message');
          },1000);
        });
      }
    }
  });
  $routeProvider.when('/test.php/:path',{
    template : function () {
      return "<div>Inside page</div>";
    },
    resolve: {
      message: function ($timeout, $q) {
        return $q(function(resolve){
          $timeout(function () {
            resolve('message');
          },1000);
        });
      }
    }
  });

或 PHP:

sleep(1)

enter 事件触发，但也许当它在缓存中或当浏览器快速获取它时，它不会。

github 上有一些 hack，但我不是快速 hack 的忠实粉丝，因为它们的可靠性。

例如 github 中提到的这个肮脏的 hack 不再有效：

$rootElement.data("$$ngAnimateState").running = false;

我也试过：

app.run(function($animate) {
  $animate.enabled(true);
});

但它有一个非常奇怪的行为，在 safari 中它没有帮助。

这是一个JSBIN EXAMPLE

在此先感谢，我将等待您的帮助！

Answer 1

所以，经过github几天的讨论，我们找到了解决方案：

首先我们必须在 app.run 上启用动画（默认情况下禁用）。然后根据我们的情况，我们应该禁用 body 上的动画，并直接在视图上启用它。但是只要我们不能在 [ng-view] 元素上启用动画，因为我们无法在 $animate 之前获取新创建的节点，我们应该将 [ng-view] 元素包装在一个容器 div.

HTML:

<div id="view-container">
   <div class="view" ng-view></div>
</div>

JS:

app.run(function($animate) {
  $animate.enabled(true);
  $animate.enabled(document.body, false);
  $animate.enabled(document.getElementById('view-container'), true);
});

但这还不够，因为 angular 检查 document.hidden 并且虽然它是正确的，但 $animation 不起作用。所以我们必须覆盖 angular 函数以便 $animation 始终工作（尽管它可能对动画平滑度有点危险）：

app.value('$$isDocumentHidden', function() { return false; });

就是这样！希望有人会发现它有用！

ngView Animation Enter 在第一页加载时不触发

ngView Animation Enter not firing on first page load

javascript

angularjs

ng-animate

ngroute