折叠过渡不适用于 Angular 的 UI 引导程序

我正在尝试创建一个DIV，该DIV将在单击按钮时显示/隐藏。UI Bootstrap页面显示了使用CSS过渡的一个不错的简单示例。

这是我复制他们的代码的小提琴，几乎完全（使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;
});

谢谢！

angulajs ui bootstrap 0.13.0需要动画模块。注册n angimate它将起作用。问题

Original plnkr

Modified, animation working plnkr

只是将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临时，才能使崩溃动画在Angular 1.3中工作。

似乎有一个版本限制，直到停止动画为止。

这是小提琴，可以看到它按照您的需求工作，但是使用最新版本，它只能使用。

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

相关内容

最新更新

热门标签：