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

2024-01-08

我正在尝试创建一个 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(使用前将#替换为@)

折叠过渡不适用于 Angular 的 UI Bootstrap 的相关文章

  • 无头镀铬:镀铬无法到达

    我正在使用 Chrome headless 来运行量角器测试 它运行了一段时间 但之后我收到以下错误 15 36 30 E 启动器 chrome 无法访问 会话信息 无头 chrome 59 0 3071 115 驱动程序信息 chrome
  • Angular Bootstrap $modal 如何动画化?

    我没有使用任何引导样式 我正在完全定制一切 制作动画相当简单 因为 modal uses fade in 我能够覆盖这些样式并且效果很好 但是模态是如何动画出来的呢 我没有看到任何类别被应用或删除 它会立即从 DOM 中删除 我怎样才能定制
  • 如何在 AngularJS 中使用 $timeout 运行带有参数的函数?

    我的 AngularJS 控制器中有这个函数 看起来像这样 polling interval 1000 var poll function Execution code timeout poll polling interval poll
  • 尝试使用 angularJS 和 c# webapi 从服务器下载文件

    将文件上传到服务器时效果很好 没有损坏的文件 但是 当我下载文件时 除了纯txt 它们起作用 它们的规模不断扩大并变得腐败 经过大量调查后 我不知道可能出了什么问题 我只是写文件 作为响应流并下载 blob 欢迎任何想法 严重依赖此线程来解
  • 清除 CSS 过渡

    我使用 CSS 框架 该框架在将鼠标移动到输入元素上时应用过渡 我有一堂课 我不想有这种转变 这可能吗 只需放置过渡 无 在CSS中并使其优先级高于其他 Example html div class a div div class a b
  • perl:正确的“内容类型”格式以返回“图像数据 uri”

    我有一个模板angularjs期待着image data uri由通过调用的服务器调用返回src的属性img模板的元素 img width 200px height 200px src http localhost 3000 returni
  • Outlook Rest 调用表单 angularjs

    使用 Outlook 我正在尝试创建事件 当我使用 POSTMAN 发送请求时 它工作正常 但 Angularjs 中的相同代码却不起作用 代码有什么问题 请帮忙 scope createEvents function var url ht
  • 将 memoize 函数与 underscore.js 一起使用

    我正在尝试使用 ajax 调用缓存结果memoize函数来自Underscore js 我不确定我的实施情况 以及如何使用密钥检索缓存的结果数据 下面是我的实现 JavaScript 代码 var cdata http get HOST U
  • 除了将它们注入控制器之外,还有其他方法可以访问已解析的状态依赖关系吗?

    我需要从服务或指令访问已解析的数据 以在整个应用程序中执行一些常规操作 我似乎能够访问解析数据的唯一方法是将其注入控制器 这是我设置的测试数据 resolve test function console log resolving retu
  • AngularJS - 为什么使用“控制器作为虚拟机”?

    整个周末 我都很苦恼 不明白为什么子控制器无法识别父控制器的功能 我很快意识到将我的控制器作为虚拟机是原因 div div div div div div 当然 现在看来很明显 child1 和 2 都不会看到 ParentCtrl 中的函
  • Cordova 文件传输到节点服务器

    我正在使用 ng Cordova fileTransfer 插件尝试将用户相机胶卷中的照片上传到 Node Express 服务器 我正在获取照片的本地 URI 并尝试将其传递给插件 如下所示 cordovaFileTransfer upl
  • 关注提交时第一个 .ng-invalid 字段 - 不适用于 radios-inline

    我正在使用已接受答案中的指令将焦点设置在 AngularJs 表单中的第一个无效输入上 https stackoverflow com questions 20365121 set focus on first invalid input
  • 如何从 ng-repeat 获取选定的值

    这是我的代码 我通过 ng repeat 获取数据并显示它 如下面的代码所示 我想要的是 如果我单击其中任何一个名称 那么它应该用该名称提醒我 我怎样才能实现这个目标 var myfriend angular module myfriend
  • 尝试为每一行编写测试用例

    已经编写了跳跃方法的测试用例 但当我看到代码覆盖率报告时 它不会进入onloadend方法seat onloadend 在 createSpyObj 中我调用了 loadend 但它仍然没有进入内部 你们能告诉我如何解决它吗 下面提供我的代
  • 异步加载 Angular 指令模板

    我希望能够从加载指令的模板promise e g template templateRepo get myTemplate templateRepo get返回一个承诺 当解析时 模板的内容将包含在字符串中 有任何想法吗 您可以在指令中加载
  • 如何动态实例化服务?

    我有一个Utils服务很重 我想在特定的用户操作中使用其中定义的一些函数 由于这项服务很重 我想延迟实例化它 在用户操作时 我该如何实现这一目标 Service module service Utils function dep1 dep2
  • 比较 angularjs 指令中的两个字段

    我正在尝试创建可用于比较多个项目中的两个字段的指令 MarkUp div class form group div
  • 如何使用 AngularJS 输出 JSON 数组中的元素

    JSON 数组定义在作用域中 scope faq Question 1 Answer1 Question 2 Answer2 HTML div f div Output Question 1 Answer1 Question 2 Answe
  • 在 Firefox 和 Safari 中,keypress 和 keydown 优先于粘贴事件

    我有一个使用 jqlite 的 Angular 指令 我想绑定按键 按键和粘贴事件来更新指令上的选项 我使用以下方法绑定到粘贴 按键和按键事件 input bind paste elementClass updateOptions inpu
  • 如果只有一个元素发生变化,为什么 AngularJs 会更新数组/哈希映射的所有元素?

    我有一个简单的哈希图和一个以文本形式显示状态的简单方法 但是当我仅更新 1 个用户状态时 所有这些状态都会更新 为所有用户调用函数 有没有一种方法可以只更新一个元素而不是全部 示例代码在这里 只需看看当您单击 更改状态 按钮时控制台中会发生

随机推荐

  • 上传文件和从 FTP 下载文件

    我正在尝试制作一个上传 下载的程序 exe文件到一个FTP 我尝试使用FtpWebRequest 但我只成功上传和下载 txt文件 然后我在这里找到了一个使用下载的解决方案WebClient WebClient request new We
  • UITableView 在编辑时 didSelectRow 吗?

    我正在构建一个非常类似于内置天气应用程序的翻转视图或编辑模式下时钟应用程序的闹钟视图的界面 表视图始终处于编辑模式 因此删除图标出现在每个单元格的左侧 当表视图处于编辑模式时 我的代表不会收到didSelectRowAtIndexPath通
  • 如何将所有activiti部​​署的bpmn文件转换为camunda?

    在camunda和activiti中 部署的文件存储在 ACT GE BYTEARRAY 表中 bpmn文件插入到blob列 bytes 中 我想将所有 activiti 部署的 bpmn 文件转换为 camunda 最好的方法是什么 Be
  • 在 tkinter 中显示 Pandas 数据框

    我正在创建一个 tkinter gui 它将接受用户输入的变量 然后将其传递给 SQL 和查询的数据 在本例中为单列数据框和箱线图 然而 目前我找不到在 tk gui 中显示我的 pandas 数据框的方法 我还没有找到任何模块或方法来显示
  • 计算坐标列表之间的地理距离(纬度、经度)

    我正在编写一个 Flask 应用程序 使用从 GPS 传感器提取的一些数据 我能够在地图上绘制路线 并且想要计算 GPS 传感器行驶的距离 一种方法可能是只获取开始和结束坐标 但是由于传感器的移动方式 这是非常不准确的 因此 我对每 50
  • 使用 Powershell 编辑 XML 属性

    因此 我有一个 exe config 文件 我试图在其中搜索特定属性 然后使用 Windows 7 中的 Powershell 版本 4 0 对其进行编辑 但我遇到了问题 我尝试了几件事 但没有取得任何成功 这是我正在使用的配置文件的精简版
  • 秒表逻辑

    我想在android中开发一个简单的秒表逻辑 单击列表视图时 计时器应启动 单击按钮时 计时器应停止 任何人都可以指导我吗 任何示例代码都会有很大帮助 使用跑表 https github com cgoldberg netplot blob
  • 如何改进这个排序代码? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • SQL Server 2008在生产环境中表现如何?

    我正要移动服务器 我正在和某人交谈 他们建议使用服务器上安装的 sql server express 2008 我可以完全访问服务器 这个 Express 引擎的工作速度 性能 与真正的 sql server 2008 相同吗 我知道限制
  • 如何从 sqlite 数据库填充可扩展列表视图

    我引用了一些链接 但没有得到好东西 我在 sqlite 中有一张表 有 4 列 id 菜单名称 描述 金额 我希望 menu name 应该是父级 描述和金额应该是从数据库填充的子级 当我单击特定的 menu name 时 它 应该展开并显
  • 在批处理文件参数中保留“=”(等号)字符

    我编写了一个批处理文件来启动应用程序 该应用程序不是我的 我无法修改它 批处理文件本身接受一些参数 应用程序接受其他参数 批处理文件使用 SHIFT 使用其所有选项 然后使用正确的环境启动应用程序 并将其余参数传递给应用程序 调用批处理文件
  • 将 javascript 注入 javascript 函数

    我有一个奇怪的问题 我需要将一些 javascript 注入到另一个 javascript 函数中 我正在使用一个已锁定的框架 因此我无法更改现有功能 我得到的是这样的东西 function doSomething 我可以操纵 上面 但是我
  • 在我的 Java 应用程序中添加 Web 浏览器

    我有一个java应用程序 用于查看网络内容 所以我想在我的应用程序中添加一个功能齐全的浏览器 我已经尝试过了JEditorPane并且它不处理动态内容 还有其他办法吗 有关如何做的任何帮助吗 这个链接是很好的例子 在 swing 中创建浏览
  • 如何在Java/Swing中使用JLabel制作动画?

    我有一个Java课程的期末项目 它是青蛙跳跃游戏 这是描述它的视频 https www youtube com watch v NxWWP9cK24o https www youtube com watch v NxWWP9cK24o 我不
  • # 登录 CSS 选择器

    一些 CSS 选择器有 在他们面前 这意味着什么 它是 ID 选择器 CSS 标准的基本功能 它根据给定的 ID 匹配 HTML 元素id属性 当然 假设有一个合格的文档 看W3C 选择器规范 http www w3 org TR sele
  • iframe 可以在 WKWebView 中与 Cordova 一起使用吗?

    根据 Apache Cordova 博客 iframe 可能无法使用 WKWebView https cordova apache org news 2018 08 01 future cordova ios webview html ht
  • 将 javascript 代码段附加到 body 标记的末尾

    我正在寻找一种将 javascript 代码块插入到 ASP NET 页面末尾的方法 Page ClientScript RegisterClientScriptBlock typeof Page showVideo sScript tru
  • 使用 HQL 选择集合

    我有以下课程 人 java class Person String name Set
  • 与变量的抽象矩阵乘法

    我知道 python 进行矩阵乘法的能力 不幸的是我不知道如何抽象地做到这一点 所以不与 确定的数字 但带有变量 Example M 1 0 1 d a c 0 1 有没有办法定义a c和d 以便矩阵乘法 给我 1 d a a d c Us
  • 折叠过渡不适用于 Angular 的 UI Bootstrap

    我正在尝试创建一个 div 当单击按钮时它将显示 隐藏 这UI 引导页面 https angular ui github io bootstrap 显示了一个使用 css 过渡的简单示例 这是我的fiddle https jsfiddle