Question

点击 div 时，我使用 Angular animate 来显示 button 。

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

我在 HTML

中添加了angular和angular-animate脚本

<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']);

这是 addRoom function

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

这是 CSS ：

.coll{
  transition: all linear 0.5s;
}

我做错了什么？

Answer 1

尝试通过CSS向div添加高度。因此，请将CSS更新为：

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

希望这适合你。谢谢。

Angular-animate无法使用ng-show

1 个答案: