angularjs ui-bootstrap Accordion 不能平滑过渡/滑动

标签 angularjs accordion angular-ui-bootstrap

我正在尝试使用 angularjs ui 引导 Accordion 来构建嵌套 Accordion 。 虽然嵌套 Accordion 工作正常,但从项目到另一个项目的过渡过于严格,即过渡不平滑,如 https://angular-ui.github.io/bootstrap/ 所示。网站。

我的代码在这里http://plnkr.co/edit/bTYLBXKHVXbDfElTcb0U?p=preview

angular.module('plunker', ['ui.bootstrap'])
.controller("AccordionDemoCtrl",["$scope", function ($scope) {
  $scope.staticTitle = "Static Title";

  $scope.groups = [
    { title: "Dynamic Title 1", content: "Dynamic content 1" }, 
    { title: "Dynamic Title 2", content: "Dynamic content 2" }
  ];
}]);
<!doctype html>
<html ng-app="plunker">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
  <script src="script.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="AccordionDemoCtrl">
    <uib-accordion>
      <uib-accordion-group heading="staticTitle">
        <uib-accordion>
          <uib-accordion-group heading="new heading">new content</uib-accordion-group>
          <uib-accordion-group heading="new heading 2">new content 2</uib-accordion-group>
        </uib-accordion>
      </uib-accordion-group>
      <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</uib-accordion-group>
    </uib-accordion>
  </div>
</body>

</html>

我正在为 Accordion 寻找平滑过渡的解决方案。

我是不是遗漏了什么,或者这就是 Accordion 的工作方式吗?

欢迎任何帮助

最佳答案

为此你需要 ngAnimate,它是 1.13.0 版 ui-bootstrap 所必需的。 将其添加为脚本标签并注入(inject)您的应用程序。 我创建了 plunkr与解决方案。

angular.module('plunker', ['ui.bootstrap','ngAnimate'])
.controller("AccordionDemoCtrl",["$scope", function ($scope) {
  $scope.staticTitle = "Static Title";

  $scope.groups = [
    { title: "Dynamic Title 1", content: "Dynamic content 1" }, 
    { title: "Dynamic Title 2", content: "Dynamic content 2" }
  ];
}]);

关于angularjs ui-bootstrap Accordion 不能平滑过渡/滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33316269/

相关文章:

css - angularjs 将括号添加到数组值输出

javascript - jquery 1.10.4 中面板的 Accordion 调整高度

jquery - ionic 范围和徽章重叠

angularjs - 逗号分隔<p> Angular

javascript - 如何在智能表中按日期对项目进行排序

javascript - 查找对象数组中是否存在值(Angularjs)

ajax - JQuery UI Accordion 不适用于 AJAX 加载的内容

ios - 我可以在 Swift 中仅选择 UITableView 中一行的一部分可单击(可选择)吗?

angularjs - Angular-ui 引导模式,无需创建新 Controller

javascript - 未捕获的 TypeError : $scope. getalb.push 不是一个函数(...)