Exploring the integration of animate.css with AngularJS. Attempting to assign a class to an element on ng-click, but facing difficulties in updating the element. Various strategies were attempted, including modifying scope values through functions, without success. The goal is to add 'fadeIn', 'fadeOut', 'flipIn', and 'flipOut' classes to the animated element based on whether button 1 or button 2 is clicked.
<button ng-click="animate = !animate; classIn = 'fadeIn'; classOut = 'fadeOut'" class="btn btn-default">Fade</button>
<button ng-click="animate = !animate; classIn = 'flipIn'; classOut = 'flipOut'" class="btn btn-default">Flip</button>
<div class="animated-wrapper">
<h1 class="text-center animated" ng-class="{'{{classIn}}': animate, '{{classOut}}': !animate}">Animation</h1>
</div>
Thanks
UPDATE: Experimentation with the code led to a solution (adjusting @hadiJZ's response slightly):
<button ng-click="setAnimateClass(animate = !animate, 'fadeIn', 'fadeOut')" class="btn btn-default">Fade</button>
<button ng-click="setAnimateClass(animate = !animate, 'bounceIn', 'bounceOut')" class="btn btn-default">Bounce</button>
<div class="animated-wrapper">
<h1 class="text-center animated" ng-class="animateClass">Animation</h1>
</div>
And within the controller:
$scope.animate = true;
$scope.setAnimateClass = function (animate, classIn, classOut) {
if (animate) {
$scope.animateClass = classIn;
} else {
$scope.animateClass = classOut;
}
};