angularjs - Notification when transition completes -
i use angular 1.3.1, nganimate css transitions. , want know when css transition starts , completes.
i expecting able use module.animation not work expect (and docs suggest). i'm not able notification when transition completes.
i have created plunker: http://plnkr.co/edit/ugcmbboilt1xvhx7jgst.
this html code:
<body ng-controller="controller ctrl"> <h1>angular animation issue!</h1> <div class="animation" id="resizeme" ng-class="ctrl.classname"></div> <label> <input type="checkbox" ng-model="ctrl.classname" ng-true-value="'big'" ng-false-value="''"> bigger! </label> this css code:
#resizeme { width: 100px; height: 100px; background-color: red; -webkit-transition: width linear 1s; transition: width linear 1s; } #resizeme.big { width: 200px; } and javascript code:
var module = angular.module('app', ['nganimate']); module.controller('controller', function() { this.classname = ''; }); module.animation('.animation', function() { return { addclass: function(elemennt, classname) { console.log('addclass animation starts'); return function(cancel) { console.log('addclass animation completes') } }, removeclass: function(elemennt, classname) { console.log('removeclass animation starts'); return function(cancel) { console.log('removeclass animation completes') } }, } }); checking checkbox runs "addclass" animation. "addclass animation starts" message in console, don't "addclass animation completes" message when transition complete.
the javascript-defined animations section of nganimate docs says following function returned enter, addclass , friends:
//this (optional) function called when animation //completes or when animation cancelled (the cancelled //flag set true if cancelled). so i'd expect function outputs "addclass animation completes" called when transition completes. it's not called.
does know how can notification when transition completes?
ps: know use $animate service , promise returned $animate.addclass. i'm trying use ng-class (and other animation-compatible angular directives), don't have access promise provided $animate service.
Comments
Post a Comment