ngAnimate с Angular 1.4 + TypeScript не работает во время загрузки страницы

TL; DR

При использовании ES5 вид вначале исчезает (пример ES5)

Вид НЕ исчезает при использовании импорта Typescript (пример импорта TypeScript и ES6)

В настоящее время я экспериментирую с модулями Typescript, ES6 и с тем, как интегрировать все эти технологии. В большинстве случаев все работает finde. Однако я хотел бы оживить ui-view с помощью ngAnimate, и здесь возникает проблема. Почему-то, если я использую модули ES6 и их оператор import, кажется, что мои зависимости загружаются лениво, так что ngAnimate не будет работать во время начальной загрузки страницы. После загрузки страницы анимация работает нормально, например. анимация представления, если пользователь нажимает на ссылку. Что я хотел бы видеть, так это то, что ui-view постепенно исчезает в начале.

Я установил два Plunker, чтобы продемонстрировать как поведение приложения в простом старом ES5, так и приложение Typescript, которое использует SystemJS и оператор import для загрузки своих зависимостей.

Вот пример ES5. Если вы запустите этот Plunker, вы заметите, как вначале вид исчезает. Все, что я сделал, это включил файлы через тег скрипта в index.html. Анимация выполняется с помощью простого CSS:

ui-view.ng-enter {
  animation: fadeIn .5s ease both;
  animation-delay: .3s;
}

ui-view.ng-leave {
  animation: fadeOut .5s ease both;
}

Вот пример Typescript. Вы, надеюсь, заметите разницу в том, что изображение не исчезнет, ​​даже если в нем используется тот же механизм анимации. Единственная разница здесь в том, что я использую Typescript (это не должно быть проблемой) и модули ES6, которые импортируются через import. Почему-то кажется, что если я использую import, ngAnimate загружается не полностью или, возможно, даже не загружается вообще во время загрузки страницы. Может лениво грузится?

Мне бы очень хотелось, чтобы этот стек работал, потому что он намного веселее и современнее. Любые идеи?


webpack typescript angularjs ng-animate
person LordTribual    schedule 16.12.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

После некоторого расследования и помощи одного из членов команды Angular я обнаружил, что ngAnimate по умолчанию отключает все анимации при загрузке для первых двух дайджестов. Это означает, что если он обнаруживает загружаемые удаленные ресурсы, он продолжает ждать, пока они не будут готовы. Это как-то так, когда вы используете модули Typescript / ES6. Вы можете обойти эту ситуацию и гарантировать, что все анимации будут запускаться при начальной загрузке, даже если удаленные ресурсы загружаются, создав директиву для включения анимации с $animate.enabled(true);. Вы можете разместить директиву в теге body или html. В приведенном выше Plunker я добавил директиву к тегу body. Это то, что вам нужно:

<body allow-animations-on-load>
  <ui-view></ui-view>
</body>

app.directive('allowAnimationsOnLoad', ['$animate', function($animate) {
  $animate.enabled(true);
}]);

Я также обновил соответствующий Plunker. Как видите, при начальной загрузке анимация постепенно усиливается.

person LordTribual    schedule 04.01.2016