My current issue involves performing animation in Angular and encountering different results for similar instances.
Two scenarios are almost identical - one works perfectly while the other fails to animate, leaving me puzzled as to the reason behind its failure.
The first directive successfully animates a set of child elements within the element:
dwApp.directive('introText', ['$animate', '$rootScope', function ($animate, $rootScope) {
return {
restrict: 'A',
scope: {
},
link: function (scope, element, attrs) {
scope.animationStarted = false;
$rootScope.$on('element-in-view', function (event, parent) {
if (!scope.animationStarted) {
scope.animationStarted = true;
$animate.addClass(element, 'slidein');
};
});
}
}
}]);
dwApp.animation('.slidein', function () {
return {
addClass: function (element, className) {
TweenMax.staggerTo(element.children(), 2.8, { opacity: 0.85, left: '5%', ease: Circ.easeOut }, 3);
}
}
});
The second direcive, however, does NOT work as expected: Despite successful console logging up until "
console.log('performing animation');The HTML code is simply:
<mask></mask>
dwApp.directive('mask', ['$animate', '$rootScope', function ($animate, $rootScope) {
return {
restrict: 'E',
link: function (scope, element, attrs) {
console.log('mask directive')
$rootScope.showMask = function () {
console.log('showMask called - add class')
$animate.addClass(element, 'showmask');
};
// test
$rootScope.showMask();
}
}
}]);
dwApp.animation('.showmask', function () {
console.log('in showmask animation service');
return {
addClass: function (element, className) {
console.log('performing animation');
TweenMax.to(element, 1, { opacity: 1 });
}
}
});
Upon inspecting the HTML after calling $rootScope.showMask(), I notice that the mask now includes the class:
<mask class="showmask"></mask>
If anyone has any insights on where I might be erring, please share your thoughts!