Angular-animate not working with ng-show - angularjs

Question

I am using Angular animate to show a div when a button is clicked.
This is the button which shows the div:
<input type='button' value='+' ng-click=addRoom(x) ng-model="collapse">
This is the div which is shown when the button is pressed.
<div class="row coll" ng-show="collapse">
<div ng-repeat="data in room[x.room_type_id]">
Adult:<select ng-model="selAdultValue" ng-change="setAdultPrice(x)" >
<option ng-repeat="a in x.planNames">{{a}}</option>
</select>
</div>
<button class="btn pull-right" ng-class="{'btn-primary': book_status == 'AVAILABLE', 'btn-info disabled': book_status == 'NOT AVAILABLE'}" data-toggle="modal" data-target="#book_now" ng-click="afterTax()">Book Now</button>
</div>
This is working fine but the div is shown instantly instead of having a smooth transition.
Example of what I am trying to achieve:
Link
I have included the angular and angular-animate script in my HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
and Injected it in my Module
var app = angular.module('myApp', ['ngAnimate']);
Here's the addRoom function
$scope.addRoom = function(x){
$scope.collapse = true;
}
Here's the CSS:
.coll{
transition: all linear 0.5s;
}
What am I doing wrong?

Answer 1

Try adding height to the div by CSS. So, update your CSS to :
.coll{
transition: all linear 0.5s;
height: 100px;
}
Hope this works for you .
Thank you .