Search code examples
javascripthtmlangularjsanimationtween

How to trigger function for animation transition?

I would like to manually transition in my html in the controller with javascript code, i.e. a tween library like TweenMax.

So instead of the css:

.ng-enter { /* transition css */ }

I would like to target a javascript function:

function onEnter() { /* transition code */ }

Is there some kind of event/hook api to trigger this?

[Edit1] Regarding the possible duplicate of question, I struggle with applying it to my use case. I also must admit that I have tons of workarounds for the ng-enter, but it is the ng-leave I would like to tap into directly with code instead.

I have a hunch that I need to do something like this in the constructor of the controller:

$scope.$on("SOME_NG_LEAVE_EVENT?", transitionOut); // transitonOut being a function

But I struggle with the documentation, and finding list of events, and how "ng-enter/ng-leave" transforms to a javascript-angualrjs listener.

[Edit2] After alot of browsing, I finally found this: https://docs.angularjs.org/api/ng/service/$animate#leave

But I do not understand how to use it.

Solution

  • Found answer: http://tech.willandskill.se/animate-ui-view-with-gsap/ https://docs.angularjs.org/api/ngAnimate

    It does not specifically answer my problem, where I want the controller itself control the animation, but I should be able to get there from this api.