angularjs - Angular-animate not working with ng-show -

i using angular animate show div when button clicked.

this button shows div:

<input type='button'  value='+'   ng-click=addroom(x) ng-model="collapse"> 

this div shown when button 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 working fine div shown instantly instead of having smooth transition.

example of trying achieve: link

i have included angular , angular-animate script in 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 in module

var app = angular.module('myapp', ['nganimate']); 

here's addroom function

$scope.addroom = function(x){      $scope.collapse = true; } 

here's css:

.coll{   transition: linear 0.5s; } 

what doing wrong?

try adding height div css. so, update css :

.coll{   transition: linear 0.5s;  height: 100px;  } 

hope works . thank .