折叠过渡不适用于 Angular 的 UI Bootstrap
Posted
技术标签:
【中文标题】折叠过渡不适用于 Angular 的 UI Bootstrap【英文标题】:collapse transition not working with angular's UI Bootstrap 【发布时间】:2015-07-22 14:25:30 【问题描述】:我正在尝试创建一个在单击按钮时将显示/隐藏的 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 使动画无法正常工作。 【参考方案1】:在停止动画之前似乎有版本限制。
这里有一个 Fiddle 可以看到它按照您的意愿工作,但它只能使用最新版本。
<html !DOCTYPE html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-app="my_app">
<br>
<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>
<script src="http://code.angularjs.org/1.2.28/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.8.0/ui-bootstrap.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-animate.min.js"></script>
<script>
angular.module('my_app', ['ngAnimate', 'ui.bootstrap']);
function CollapseDemoCtrl($scope)
$scope.isCollapsed = false;
</script>
</body>
</html>
【讨论】:
是的,看起来您需要特定(非最新)版本的角度和引导程序!我会转告的!【参考方案2】:只需将 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 中工作。
【讨论】:
啊哈。那我猜没什么大不了的。谢谢! 见 Premchandra Singh 的回答。需要 ngAnimate 模块才能使动画工作。【参考方案3】:Angulajs UI Bootstrap 0.13.0 需要 ngAnimate 模块来制作动画。注册 ngAnimate 它将工作。 issue
Original plnkr
Modified, animation working plnkr
【讨论】:
为 Angular 1.5 工作!以上是关于折叠过渡不适用于 Angular 的 UI Bootstrap的主要内容,如果未能解决你的问题,请参考以下文章
Spring Boot JWT Cors 不适用于 Angular 8
Angular UI 和 Bootstrap:点击链接时折叠移动导航栏