折叠过渡不适用于 angular 的 UI Bootstrap

Question

我正在尝试创建一个 div，它会在单击按钮时显示/隐藏。 UI Bootstrap page 显示了一个使用 css 转换的简单示例。

这是我的 fiddle，我几乎完全复制了他们的代码（稍作改动以使 html 语法突出显示有效，并在 js 中声明我的 "app" 行）。

如您所见，它不像示例中那样工作——没有转换。为什么不？也许需要 css 转换规则——但这不是 bootstrap.css 提供的部分吗？

为了后代，来自 fiddle 的等效 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;
});

谢谢！

Answer 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>

Answer 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版本。

这也是更新后的 fiddle - https://jsfiddle.net/xv7tws10/5/

编辑：请参阅下面 Premchandra 的回复。显然你必须包含 ng-animate 才能让折叠动画在 angular 1.3.

中工作

Answer 3

Angulajs UI Bootstrap 0.13.0 需要 ngAnimate 动画模块。注册 ngAnimate 它将起作用。 issue

Original plnkr

Modified, animation working plnkr

折叠过渡不适用于 angular 的 UI Bootstrap

collapse transition not working with angular's UI Bootstrap

css-transitions

angularjs

angular-ui-bootstrap