Hi rani,
AngularJS provides animated transitions with help of CSS.
The ngAnimate module adds and removes classes.
The directives in AngularJS who add/remove classes are ng-show, ng-hide, ng-class, ng-view, ng-include, ng-repeat, ng-if and ng-switch.
For making animations, you must include the AngularJS Animate library.
Check this example.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h3
{
text-align: center;
}
div
{
transition: all linear 0.5s;
background-color: #D9B5B5;
height: 50px;
width: 100%;
position: relative;
top: 0;
left: 0;
border: 1px solid #ccc;
text-align: center;
}
.ng-hide
{
height: 0;
width: 0;
background-color: transparent;
top: -200px;
left: 200px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['ngAnimate']);
</script>
</head>
<body ng-app="MyApp">
<h3><input type="checkbox" ng-model="IsVisible">
Do you have Passport?</h3>
<div ng-hide="IsVisible">
Passport Number:<br />
<input type="text" />
</div>
</body>
</html>
Demo
For more details refer below links.
AngularJS Animations
Create Animations in AngularJS
