Mark Ufland Mark Ufland - 1 year ago 90
AngularJS Question

Angular Animate 1.58 not calling addClass function in animation module

I am trying to add some javascript animations in my angular 1.58 app but I can't seem to get it to work. I need to use a third party library called Vivus to animate an SVG when the directive it is in loads. I have added angular animate, I have included a reference to it in my module and I have added an animation function to my module with an addClass function to it. The SVG has an ng-class on it which gets a class added to it when the code runs but the addClass function never fires. My code is written in Typescript and I can't find any examples of doing this in Typescript so that may be the problem. The code is as follows

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


The animation module looks like this

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


The controller for the component looks like this

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


I've tried tying the animations to different modules but that didn't help so I have run out of ideas.

If anyone knows what I am doing wrong please let me know.

Answer Source

I got to the bottom of this after going though a lot of documentation and courses and I needed to do the add the data-ng-animate-children tag to my top level view like so

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

I also added the $animate.enabled(true) to the run function of my top level module like so

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

This allowed the animations to run as the web page is loading in the browser. After that the rest of the angular animate stuff worked as usual.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download