This is my animation. This animation works very well in all browsers except IE and Edge.
Animation does not start immediately and it happens very fast. so fast that you almost can't see it.
Does anyone know what could be the issue here?
'use strict';
angular
.module('spectre')
.animation('.slide-horizontal', SlideHorizontalAnimation)
/* ngInject */
function SlideHorizontalAnimation(TweenLite, $timeout) {
var $animation = {};
$animation.enter = function (element, doneFn) {
var direction = element.attr('data-direction');
var animationClass = 'slide-horizontal-from-right';
if (direction === 'left') {
animationClass = 'slide-horizontal-from-left';
}
element.css('display', '');
element.addClass(animationClass);
TweenLite.to(element[0], 0.5, {
className: '-=' + animationClass,
//ease: 'Power2.easeOut',
force3D: false,
useFrames:false,
onComplete: function () {
doneFn();
}
});
};
$animation.leave = function (element, doneFn) {
var direction = element.attr('data-direction');
var animationClass = 'slide-horizontal-from-left';
if (direction === 'left') {
animationClass = 'slide-horizontal-from-right';
}
element.removeClass(animationClass);
TweenLite.to(element[0], 0.4, {
className: '+=' + animationClass,
force3D: false,
useFrames:false,
//ease: 'Power2.easeOut',
onComplete: doneFn
});
};
return $animation;
}