Angular Animate 1.58 不调用动画模块中的 addClass 函数

Question

我想在我的 angular 1.58 应用程序中添加一些 javascript 动画，但我似乎无法让它工作。当加载指令时，我需要使用名为 Vivus 的第三方库来为 SVG 设置动画。我添加了 angular animate，我在我的模块中包含了对它的引用，并且我在我的模块中添加了一个带有 addClass 函数的动画函数。 SVG 上有一个 ng-class，当代码运行s 但 addClass 函数永远不会触发时，它会添加一个 class。我的代码是用 Typescript 编写的，我在 Typescript 中找不到任何这样做的例子，所以这可能是问题所在。代码如下

<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>

动画模块是这样的

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);
        }
     };
});
}

组件的控制器如下所示

命名空间app.main.home{ "use strict";

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

在阅读了大量文档和课程后，我深入了解了这一点，我需要像这样将 data-ng-animate-children 标签添加到我的顶级视图中

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

我还像这样将 $animate.enabled(true) 添加到我的顶级模块的运行函数中

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

当网页在浏览器中加载时，这允许动画运行。在那之后，其余的 angular 动画内容照常工作。

Angular Animate 1.58 不调用动画模块中的 addClass 函数

Angular Animate 1.58 not calling addClass function in animation module

angularjs

ng-animate