なめらかアコーディオンパネル

　どうでもいいけどサンプルのラテン語なんだろうあれ

なめらかではないアコーディオンパネル

index.html

<dl>
    <dt ng-click="showPanel=1">Step.1</dt>
    <dd ng-hide="showPanel!=1"><p>...</p></dd>
    <dt ng-click="showPanel=2">Step.2</dt>
    <dd ng-hide="showPanel!=2"><p>.../p></dd>
    <dt ng-click="showPanel=3">Step.3</dt>
    <dd ng-hide="showPanel!=3"><p>...</p></dd>
</dl>

　dt要素のクリックでshowPanelの値を更新、値によってdd要素の表示を切り替えています。
　アコーディオン感はありませんが取り敢えずぱたぱた開閉はします。

なめら化

　前回と同じくngAnimateを追加します。

index.html

<script type="application/javascript" src="../angular/angular-animate.js"></script>

main.js

angular.module('sample', ['ngAnimate']).controller('IndexController',
        [ '$scope', function($scope) {} ]);

　ngAnimateを追加すると表示/非表示(ngHide)の切替時にngHideAddやngHideRemoveが追加されるようになります。一秒くらいですぐ外されるクラスです。
　この追加されるクラスに対応するCSSを書いてやります。

base.css

dd {
    margin: 0;
    background: #d4d0c8;
    overflow: hidden;
    transition: 1s linear;
    -webkit-transition: linear 1s;
    -moz-transition: linear 1s;
    -o-transition: linear 1s;
}

dd:not(.ng-hide){
    max-height: 50em;
}

dd.ng-hide{
    max-height: 0em;
}

.ng-hide-remove {
    max-height: 0em;
}

.ng-hide-add{
    max-height:50em;
}

　で、開閉が同時に行われないのはなぜだろうなこれ

ngClickを用いた開閉

　開いているパネルを閉じることができないのでngClickに動作を突っ込んでやります。
　現在は簡単にng-click="showPanel=1"としていますのでここをng-click="onClickHeader(1)とかに変更。

main.js

$scope.onClickHeader=function(num){
    if($scope.showPanel==num){
        $scope.showPanel=0;
    }else{
        $scope.showPanel=num;
    }
}

　これで開いているパネルも閉じることができるようになりました。
　開閉が同時に行われない問題の対策をご存じの方はご教示ください……(:3」∠)