I decided to take off jQuery library and to do my own functions. I started with Animation because I need it.
So, I store the interval ID and other datas on Element Object, in animate function I can see the property, but in another function, with same element, I can't see my property.
How I can make them global or something?
https://jsbin.com/yeqawuzoxu/edit?html,output
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module( "test", [] );
app.run(function () {
angular.element.prototype.animate = function (data,duration,transition,complete) {
if ( ! this.length ) return false;
if ( data.height === undefined ) return false;
if ( Math.floor(duration) !== duration || typeof duration !== "number" ) return false;
if ( duration <= 0 ) return false;
var act_height = this[0].offsetHeight;
var new_height = parseFloat(data.height.replace( /[^\d\.]*/g, ''));
var element = this;
element.Animation = [];
element.Animation.start = new Date;
console.log ( element );
element.Animation.interval = setInterval(function() {
var timePassed = new Date - element.Animation.start
var progress = timePassed / duration;
if (progress > 1) progress = 1;
var trans = ( Function.prototype.isPrototypeOf(complete) ) ? transition(progress) : progress;
element.css('height', (trans * (new_height-act_height)) + act_height + 'px');
if (progress == 1) {
console.log ( element );
if ( Function.prototype.isPrototypeOf(complete) ) complete();
clearInterval(element.Animation.interval);
element.Animation = null;
delete element.Animation;
}
}, 10 );
}
angular.element.prototype.stop = function () {
if ( ! this.length ) return false;
console.log ( this );
}
});
app.directive('cacat', function() {
return {
restrict: 'E',
link: function (scope, element, attrs) {
element.css('float', 'left');
element.css('height', '100px');
element.css('width', '100px');
element.css('background-color', 'black');
scope.anim = function ($event) {
if (! angular.element($event.target).hasClass('progress') ) {
angular.element($event.target).addClass('progress');
angular.element($event.target).animate({
height: '280px'
}, 2000, function(t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }, function(){
angular.element($event.target).removeClass('progress');
});
} else {
angular.element($event.target).stop();
}
}
}
};
});
</script>
</head>
<body ng-app="test">
<cacat ng-click="anim($event)"></cacat>
<cacat ng-click="anim($event)"></cacat>
<cacat ng-click="anim($event)"></cacat>
<cacat ng-click="anim($event)"></cacat>
</body>
</html>
Press on one box, wait a while (to the middle maybe) and click again. After this wait to animation stop. You will see in console the same element, but when you clicked in animation progress you will not see the property Animation.
