Angular Animate 1.58アニメーションモジュールのaddClass関数を呼び出さない

Question

私の角1.58アプリでJavaScriptアニメーションを追加しようとしていますが、動作させられないようです。 SVGの読み込み中にSVGをアニメーション化するには、Vivusというサードパーティのライブラリを使用する必要があります。私は角アニメーションを追加しました。私はそれを私のモジュールで参照しました。私はaddClass関数を使って、私のモジュールにアニメーション関数を追加しました。 SVGにはng-classがあり、コードの実行時にクラスを追加しますが、addClass関数は決して起動しません。私のコードはTypescriptで書かれているので、これは問題の可能性があるのでTypescriptでこれを行う例は見つけられません。アニメーションモジュールは、コンポーネントのコントローラがこの

名前空間app.main.home { 「厳格な使用」のように見えるこの

namespace app { 
"use strict"; 

declare var Vivus: any; 

angular.module("app").animation(".banner-change", function(): any { 
    return { 


     addClass: function(element: any, className: any, done: any): any { 

      let vivus: any = new Vivus("vivusanimated", {duration: 300}, done); 
     } 
    }; 
}); 
} 

ように見える

<div class="banner-colour"> 
<br> 
<br> 
<svg ng-class="{{$ctrl.bannerClass}}" class="banner-change" id="vivusanimated" width="47" height="47" viewBox="0 0 47 47" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M6.922 6.922h32.906v32.906H6.922z"/><mask id="b" x="0" y="0" width="32.906" height="32.906" fill="#fff"><use xlink:href="#a"/></mask></defs><g fill="none" fill-rule="evenodd" opacity=".5"><use stroke="#FFF" mask="url(#b)" stroke-width="2" transform="rotate(45 23.374 23.374)" xlink:href="#a"/><g fill="#FFF"><path d="M15.222 25.12l.707-.706 5.656 5.657-.707.708z"/><path d="M20.172 30.07l9.9-9.898.706.707-9.9 9.898z"/></g></g></svg> 
<br> 
<br> 
</div> 

次のようにコードがあります。

interface IBannerComponentBindings { 

} 

interface IBannerComponentController extends IBannerComponentBindings { 
    bannerClass: string; 
} 

class BannerComponentController implements IBannerComponentController { 

    public bannerClass: string; 

    constructor() { 
     this.bannerClass = "banner-graphic"; 
    } 

} 

class BannerComponent implements ng.IComponentOptions { 

    public bindings: any; 
    public controller: any; 
    public templateUrl: string; 

    constructor() { 
     this.bindings = { 
     }; 

     this.controller = BannerComponentController; 
     this.templateUrl = "app/main/home/banner.html"; 
    } 

} 

angular.module("app.main.home").component("ylBanner", new BannerComponent()); 
} 

私はアニメーションを別のモジュールに結び付けようとしましたが、それは役に立たなかったので、アイデアが足りなくなりました。

私が間違っていることを誰かが知っているなら、私に知らせてください。

Answer 1

私は、ドキュメントやコースの多くものの行く後にこのの底に持って、私はそう

<div data-ui-view data-ng-animate-children></div> 

ように私のトップレベルのビューにデータ-NG-アニメイト・子供のタグを追加行うために必要な私はまた、これは、Webページがブラウザにロードされるようなアニメーションを実行することができそう

run.$inject = ["$animate", "$window", "$rootScope"]; 
function run($animate: ng.animate.IAnimateService, $window: any, $rootScope: ng.IRootScopeService, $location: ng.ILocationService): void { 
    $animate.enabled(true); 
} 

のように私のトップレベルのモジュールの実行機能に（真）animate.enabled $を追加しました。その後、残りの角度のアニメーションはいつものように動きました。