折叠过渡不适用于 angular 的 UI Bootstrap
[英] collapse transition not working with angular's UI Bootstrap
本文介绍了折叠过渡不适用于 angular 的 UI Bootstrap的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个 div，该 div 将在单击按钮时显示/隐藏.UI Bootstrap 页面 展示了一个使用 css 过渡的简单示例.
这是我的 fiddle 复制他们的代码的地方，几乎完全一样(稍作更改以使 html 语法突出显示工作，还有一行声明我在 js 中的应用程序").
如您所见，它不像示例中那样工作——没有过渡.为什么不?也许需要一个 css 转换规则——但这不是 bootstrap.css 提供的部分吗?
<小时>
对于后代，小提琴中的等效 html 文件将是:
<头><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><body ng-app="my_app"><div ng-controller="CollapseDemoCtrl"><button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">切换折叠</button><小时/><div collapse="isCollapsed"><div class="well well-lg">一些内容</div>
</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 有一个bug，导致动画不工作.
<头><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><body ng-app="my_app"><div ng-controller="CollapseDemoCtrl"><button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">切换折叠</button><小时/><div collapse="isCollapsed"><div class="well well-lg">一些内容</div>
</html>
JS 可以保持不变.我只是在html代码中修改了ui-bootstrap版本.
这是更新的小提琴 - https://jsfiddle.net/xv7tws10/5/
请参阅下面的 Premchandra 的回复.显然，您必须包含 ng-animate 才能使折叠动画在 angular 1.3 中工作.
I'm trying to create a div which will show / hide when a button is clicked. The UI Bootstrap page shows a nice simple example that uses a css transition.
Here's my fiddle where I copy their code, almost exactly (slight change to make html syntax highlighting work, and a line to declare my "app" in the js).
As you can see, it doesn't work as in the example -- there is no transition. Why not? Maybe a css transition rule is needed -- but isn't that part of what bootstrap.css provides?
for posterity, the equivalent html file from the fiddle would be:
<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>
and the equivalent .js would be:
var my_app = angular.module('my_app', ['ui.bootstrap']);
my_app.controller('CollapseDemoCtrl', function ($scope) {
$scope.isCollapsed = false;
});
Thanks!
解决方案
Just downgrade the ui-bootstrap version to 0.12.0. There is a bug in 0.13.0 that makes the animation not work.
<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>
The JS can stay the same. I just modified the ui-bootstrap version in the html code.
Here is the updated fiddle as well - https://jsfiddle.net/xv7tws10/5/
Edit: See Premchandra's response below. Apparently you have to include ng-animate in order to get collapse animation to work in angular 1.3.
这篇关于折叠过渡不适用于 angular 的 UI Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
