anglejs – 崩溃转换不能与角度的UI Bootstrap一起使用

发布时间：2020-12-18 00:15:39 所属栏目：安全来源：网络整理

导读：我正在尝试创建一个div，当点击一个按钮时，该div将显示/隐藏。 UI Bootstrap page显示了一个使用css转换的简单例子。这是我的fiddle，我复制他们的代码，几乎完全(稍微改变使html语法高亮工作，并在一行声明我的“应用程序”在js)。正如你所看到的，它不

我正在尝试创建一个div，当点击一个按钮时，该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中有一个错误，使动画无法正常工作。

<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可以保持不变我刚修改了ui-bootstrap版本的html代码。

这里是更新的小提琴以及 – https://jsfiddle.net/xv7tws10/5/

编辑：请参阅下面的Premchandra的回复。显然，你必须包含ng动画才能使崩溃动画在角度1.3中工作。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!