折叠过渡不能与angular的UI Bootstrap一起使用
折叠过渡不能与angular的UI Bootstrap一起使用
提问于 2015-05-12 06:20:10
我正在尝试创建一个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;
});谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-05-14 00:00:45
只需将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可以保持不变。我刚刚在html代码中修改了ui-bootstrap版本。
下面是更新后的小提琴-- https://jsfiddle.net/xv7tws10/5/
编辑:参见下面Premchandra的回复。显然，您必须包含ng-animate才能在angular 1.3中使用折叠动画。
Stack Overflow用户
发布于 2015-05-26 18:38:59
Angulajs UI Bootstrap 0.13.0需要ngAnimate模块来实现动画。注册ngAnimate它会工作的。issue
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30178573
复制相关文章
相似问题