Mark Ufland Mark Ufland - 1 month ago 12
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

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.

Comments