After following the lesson at https://docs.angularjs.org/api/ngAnimate, I managed to get the CSS-based animations working properly. However, I encountered an issue where all DOM elements using ng-show/ng-hide were affected by the animation. I only want a specific element to be animated, similar to the example below:
CSS:
.fade-in-out {
transition: 1s linear all;
opacity: 1;
}
.fade-in-out.ng-hide {
opacity: 0;
}
<div class='col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12 fade-in-out' ng-show='checked'><input type="text" name="first-name"></div>
<div class='col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12 fade-in-out' ng-show='checked'><input type="text" name="last-name"></div>
JS:
$timeout(function () {
scope.checked = true;
}, 2000);
The current code affects all instances of ng-hide/ng-show, but I want it to specifically target the specified html objects only. This is important as I plan on creating a dynamically generated bootstrap form that needs to fade in individually. Since combining the inputs into one div is not feasible for my scenario, I am seeking a way to isolate the animation to certain elements. Any advice or solutions for this would be greatly appreciated as I am new to this technology.