Angular-belebte arbeitet nicht mit ng-Show

Question

Ich bin mit Angular belebt ein div zu zeigen, wenn ein button geklickt wird.

Dies ist die button die die div zeigt:

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

Dies ist die div der, wenn die gezeigt button gedrückt wird.

<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> 

Dies funktioniert gut, aber die div ist aus mit einem glatten Übergang sofort statt gezeigt.

Beispiel von dem, was ich zu erreichen versuchen: Link

Ich habe die angular und angular-animate Skript in meinem 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> 

und es

in meinem Module injizierten enthalten

var app = angular.module('myApp', ['ngAnimate']); 

Hier ist die addRoomfunction

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

Hier ist die CSS:

.coll{ 
    transition: all linear 0.5s; 
} 

Was mache ich falsch?

Answer 1

Versuchen Sie, Höhe zu dem Div durch CSS hinzuzufügen. Also, aktualisieren Sie Ihr CSS auf:

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

Ich hoffe, das funktioniert für Sie. Danke.