Question

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

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

＆＃13;

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" }
  ];
}]);

＆＃13;

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

＆＃13;

我正在寻找手风琴的平滑过渡解决方案。

我错过了什么，或者这是手风琴的工作方式吗？

欢迎任何帮助

Answer 1

你需要ngAnimate，这是从版本1.13.0 ui-bootstrap中需要的。将其添加为脚本标记并注入您的应用程序。我用解决方案创建了plunkr。

     <html>
     <head>
     <style>
     .erp-menu{
     width:100%;
     height:120px;
     background-color:#99CCFF;
     }
     .erp-menubar
    {
     width:auto;
     padding-top:15px;
     font-size:1.3em;
     margin-left:15px;
    }
    .erp-menubar ul
    {
    list-style:none;
     position:relative;
    float:left;
    margin:0;
    padding:0
    }
   .erp-menubar ul a
    {
    display:block;
    color:#333;
     text-decoration:none;
     padding:0 15px;
   }
   .erp-menubar ul li
   {
   position:relative;
   float:left;
   margin:0;
   padding:0
   }
   .erp-menubar ul li.current-menu-item
   {
   background:#ddd;
    }
   .erp-menubar ul li:hover
   {
   background:#f6f6f6;
   }
   .erp-menubar ul ul
   {
   width:900px;
   height:60px;
   display: none;
   position:absolute;
   top:100%;
   left:0;
   background: #CCCCCC;
   padding-top:5px;
   z-index:100;
   }
   .erp-menubar ul ul li
   {
   display:inline;
    }
   .erp-menubar ul ul a
   {
   line-height:120%;
   padding:10px 15px
   }
   .erp-menubar ul li:hover > ul
   {
   clear:both;
   display: inline-block;
    }
   </style>
    </head>
    <body>
   <div class="erp-menu">
   <div class="erp-menubar">
   <ul>
    <li class="current-menu-item"><a href="#">Home</a>
        <ul>
            <li class="current-submenu"><a href="">Sub Menu 1</a></li>
            <li class="current-submenu"><a href="#">Sub Menu 2</a></li>
            <li class="current-submenu"><a href="#">Sub Menu 3</a></li>
            <li class="current-submenu"><a href="#">Sub Menu 4</a></li>
            <li class="current-submenu"><a href="#">Sub Menu 5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
            <li><a href="#">Sub Menu 4</a></li>
            <li><a href="#">Sub Menu 5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 2</a>
        <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
            <li><a href="#">Sub Menu 4</a></li>
            <li><a href="#">Sub Menu 5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    </div>
    </body>
      </html>

angularjs ui-bootstrap手风琴不能平滑过渡/滑动

1 个答案: