角度手風琴：動畫切換

可以有人建議怎麼做accordiontoggles動畫，如果我點擊1st div，只有第一個面板會顯示？ http://plnkr.co/edit/LdBVT0zbYdshITwr3qjh?p=preview 角度手風琴：動畫切換

2016-05-30 kipris

<body ng-controller="Ctrl"> 
    <div ng-repeat="item in items"> 
     <div class="accordion" ng-click="show=show==true? false:true;"> 
     {{item.id}} 
     </div> 
     <div class="repeated-item" ng-model="accordionContent" ng-show="show"> 
     {{item.name}} 
     </div> 
    </div> 
    </body>

你不需要控制器用於此目的，它可以直接使用處理指令 Plunker Demo

來源

2016-05-30 10:39:33 etee

當您顯示第二個div時，您可以添加動畫嗎？試圖添加CSS，但它並沒有幫助我。 – kipris

感謝致謝+1 – etee

嘗試使用ngAnimate訪問此處：https：//docs.angularjs.org/api/ngAnimate – etee

而不是重新發明車輪，使用ui bootstrap的accordion指令。它有很多自定義選項。

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function($scope) { 
 
    $scope.oneAtATime = true; 
 
    $scope.isFirstOpen = true; 
 
});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
 
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> 
 
<script src="example.js"></script> 
 

 
<div ng-app="ui.bootstrap.demo" ng-controller="AccordionDemoCtrl"> 
 
    <uib-accordion close-others="oneAtATime"> 
 
    <uib-accordion-group heading="Static Header, initially expanded" is-open="isFirstOpen"> 
 
     This content is straight in the template. 
 
    </uib-accordion-group> 
 
    <uib-accordion-group heading="Another Static Header"> 
 
     This content is straight in the template. 
 
    </uib-accordion-group> 
 
    </uib-accordion> 
 
</div>

official plunker demo

來源

2016-05-30 10:37:59

對不起，但我有太多與其他人相沖突的角色插件。所以我不能使用ui bootstrap。 – kipris

這裏是一個解決您的當你使用ng-repeat進行工作時，通常會遇到問題TE在類函數的arrray

[http://plnkr.co/edit/gBJPcFNIgUTWo5gdZzUb?p=preview`]的$索引值[1]

// JS

$scope.toggle = function($index) { 
    $scope.index = $index; 
};

//，而在HTML簡單的切換CLASS

<div class="repeated-item" data-ng-class="{'open-accordion' : index === $index}" ng-model="accordionContent" >

來源

2016-05-30 10:44:44 SuperComupter

角度手風琴：動畫切換

回答

相關問題