倒塌的过渡与棱角分明的UI引导工作 [英] collapse transition not working with angular's UI Bootstrap

查看：132
本文介绍了倒塌的过渡与棱角分明的UI引导工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个div单击一个按钮时，它会显示/隐藏。该 UI引导页显示了使用CSS转换一个不错的简单的例子。

下面是我的小提琴，我模仿他们的code，几乎一模一样（略有变化，使HTML语法高亮的工作，和行宣布在j​​s我的应用程序）。

正如你所看到的，它并不如例如工作 - 没有任何过渡。为什么不呢？或许需要一个CSS转换规则 - 但不是什么bootstrap.css提供了部​​分

为子孙后代，从小提琴相当于HTML文件将是：

 ＆LT; HTML和GT;
＆LT; HEAD＆GT;
    ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/＆GT;
    ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css/＆GT;
    ＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js＆GT;＆下; /脚本＆GT;
    ＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js\"></script>＆LT; /头＆GT;
＆LT;机身NG-应用=my_app应用＆GT;
    ＆LT; D​​IV NG控制器=CollapseDemoCtrl＆GT;
        ＆LT;按钮类=BTN BTN-默认的NG点击=！isCollapsed = isCollapsed＆GT;切换崩溃＆LT; /按钮＆GT;
        ＆LT;小时/＆GT;
        ＆LT; div合拢=isCollapsed＆GT;
            ＆LT; D​​IV CLASS =喏喏，LG＆GT;有些内容与LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

和等效的.js将是：

  VAR my_app应用= angular.module（'my_app应用'，['ui.bootstrap']）;my_app.controller（'CollapseDemoCtrl'，函数（$范围）{
    $ scope.isCollapsed = FALSE;
}）;

谢谢！


解决方案

刚刚降级的UI引导版本0.12.0。有一个在0.13.0，使得动画不能正常工作的错误。

\r
\r

＆LT; HTML和GT;\r
＆LT; HEAD＆GT;\r
    ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/＆GT;\r
    ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css/＆GT;\r
    ＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js＆GT;＆下; /脚本＆GT;\r
    ＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js\"></script>\r
\r
＆LT; /头＆GT;\r
＆LT;机身NG-应用=my_app应用＆GT;\r
    ＆LT; D​​IV NG控制器=CollapseDemoCtrl＆GT;\r
        ＆LT;按钮类=BTN BTN-默认的NG点击=！isCollapsed = isCollapsed＆GT;切换崩溃＆LT; /按钮＆GT;\r
        ＆LT;小时/＆GT;\r
        ＆LT; div合拢=isCollapsed＆GT;\r
            ＆LT; D​​IV CLASS =喏喏，LG＆GT;有些内容与LT; / DIV＆GT;\r
        ＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT;

\r

\r
\r

该JS可以保持不变。我只是在html code修改了用户界面，引导版本。

下面是更新小提琴以及 - https://jsfiddle.net/xv7tws10/5/

编辑：见下文premchandra的响应。显然，你必须包括为了得到崩溃动画角1.3工作NG-动画。

I'm trying to create a div which will show / hide when a button is clicked. The UI Bootstrap page shows a nice simple example that uses a css transition.

Here's my fiddle where I copy their code, almost exactly (slight change to make html syntax highlighting work, and a line to declare my "app" in the js).

As you can see, it doesn't work as in the example -- there is no transition. Why not? Maybe a css transition rule is needed -- but isn't that part of what bootstrap.css provides?

for posterity, the equivalent html file from the fiddle would be:

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

and the equivalent .js would be:

var my_app = angular.module('my_app', ['ui.bootstrap']);

my_app.controller('CollapseDemoCtrl', function ($scope) {
    $scope.isCollapsed = false;
});

Thanks!

解决方案

Just downgrade the ui-bootstrap version to 0.12.0. There is a bug in 0.13.0 that makes the animation not work.

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

The JS can stay the same. I just modified the ui-bootstrap version in the html code.

Here is the updated fiddle as well - https://jsfiddle.net/xv7tws10/5/

Edit: See Premchandra's response below. Apparently you have to include ng-animate in order to get collapse animation to work in angular 1.3.

这篇关于倒塌的过渡与棱角分明的UI引导工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆