我正在尝试创建一个 div,当单击按钮时它将显示/隐藏。这UI 引导页面 https://angular-ui.github.io/bootstrap/显示了一个使用 css 过渡的简单示例。
这是我的fiddle https://jsfiddle.net/xv7tws10/我几乎完全复制了他们的代码(稍作更改以使 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;
});
Thanks!
Angularjs UI Bootstrap 0.13.0 需要 ngAnimate 模块来实现动画。注册 ngAnimate 就可以了。issue https://github.com/angular-ui/bootstrap/issues/3676
Original plnkr http://plnkr.co/edit/8n1ONjGvNeJWh7kVkgQc?p=preview
Modified, animation working plnkr http://plnkr.co/edit/H6AZ62eBHbsDNIY6ckVD?p=preview
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)