我正在尝试创建一个div,当点击一个按钮时,该div将显示/隐藏。
UI Bootstrap page显示了一个使用css转换的简单例子。
这是我的fiddle,我复制他们的代码,几乎完全(稍微改变使html语法高亮工作,并在一行声明我的“应用程序”在js)。
正如你所看到的,它不像在示例中那样工作 – 没有转换。为什么不?也许需要一个css转换规则 – 但这不是bootstrap.css提供的那部分内容?
对于后代,小提琴的等效html文件将是:
<html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js"></script> </head> <body ng-app="my_app"> <div ng-controller="CollapseDemoCtrl"> <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button> <hr /> <div collapse="isCollapsed"> <div class="well well-lg">Some content</div> </div> </div> </body> </html>
和等效的.js将是:
var my_app = angular.module('my_app',['ui.bootstrap']); my_app.controller('CollapseDemoCtrl',function ($scope) { $scope.isCollapsed = false; });
谢谢!
解决方法
只需将ui-bootstrap版本降级到0.12.0。 0.13.0中有一个错误,使动画无法正常工作。
<html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script> </head> <body ng-app="my_app"> <div ng-controller="CollapseDemoCtrl"> <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button> <hr /> <div collapse="isCollapsed"> <div class="well well-lg">Some content</div> </div> </div> </body> </html>
JS可以保持不变我刚修改了ui-bootstrap版本的HTML代码。
这里是更新的小提琴以及 – https://jsfiddle.net/xv7tws10/5/
编辑:请参阅下面的Premchandra的回复。显然,你必须包含ng动画才能使崩溃动画在角度1.3中工作。