角動畫與吳先生秀

工作我使用角動畫顯示被點擊的button時div。角動畫與吳先生秀

這是button其示出了div：

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

這是div當按下button其被示出。

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

這是工作正常，但div被示出具有平滑過渡的瞬間來代替。

什麼，我想實現

例子： Link

我已經包括angular和angular-animate腳本我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>

和在我Module

注入它

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

這裏的addRoomfunction

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

這裏的CSS：

.coll{ 
    transition: all linear 0.5s; 
}

我在做什麼錯？

來源

2017-04-14 DragonBorn

將高度添加到CSS： .coll {transition}：全部線性0.5s; height：100px; } –

@TekriwalD不工作。當我點擊按鈕時，div會顯示出來，而不是一個平滑而緩慢的轉換，它會像普通的ng-show和ng-hide一樣立即顯示。 – DragonBorn

嘗試通過CSS向div添加高度。所以，更新你的CSS到：

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

希望這適用於你。謝謝。

來源

2017-04-14 11:23:02

不工作。當我點擊按鈕時，div會顯示出來，但不是平滑而緩慢的轉換，而是像普通的ng-show和ng-hide一樣立即顯示 – DragonBorn

角動畫與吳先生秀

回答

相關問題