How to make animation for ngShow/ngHide specific (ngAnimation)

Question

I followed through with this lesson: https://docs.angularjs.org/api/ngAnimate. Good thing it's working (I used the example from the following link from the CSS-based animations) but the issue I'm having is, all the DOMs that are using ng-show/ng-hide seems to be affected by the animation. I want only a certain element to be affected by the animation like this example:

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 code is working but all the other DOMs that are using ng-hide/ng-show gets affected as well, I want to make it specific to the above code only or the above html objects only. The reason for this is eventually I want to create a bootstrap form (created dynamically by js) which will fade in. Since this is created dynamically - I couldn't just combine the two inputs to one div (the explanation of this would be too long). Is there any way to do this? I'm new to this technology.

Answer 1

Use different ng-show expressions for the different sections.

<div ng-app="myApp" controller="myVm">

    <div class='fade-in-out' ng-show='!checked'>
        <input type="text" name="first-name">
    </div>
    <div class='fade-in-out' ng-show='!checked'>
        <input type="text" name="last-name">
    </div>

    <div class='fade-in-out' ng-show='!checked2'>
        <input type="text" name="first-name">
    </div>
    <div class='fade-in-out' ng-show='!checked2'>
        <input type="text" name="last-name">
    </div>

    <input type="checkbox" ng-model="checked">
    <input type="checkbox" ng-model="checked2">
</div>

JS

angular.module("myApp", ['ngAnimate']);

angular.module("myApp").controller("myVm", function($scope) {
});

CSS

.fade-in-out {
  transition: 1s linear all;  
  opacity: 1;
}

.fade-in-out.ng-hide {
  opacity: 0;
}