1.用AngularJs写左侧导航栏,指令已经封装好,但是在实现动画效果是如何写css才能像JQuery中一样实现上下收缩的动画效果.

html

        <djkaccordion>
            <djkexpander class='expander' ng-repeat='a1 in navbarlist' expander-url="a1.url"  expander-title="a1.label" expander-icon="a1.icon">
                <li ng-repeat="a2 in a1.children">
                    <a href="javascript:;" class="menu-second" ui-sref="app.{{a2.url}}">{{a2.label}}</a>
                    <ul class="menu-third">
                        <li ng-repeat="a3 in a2.children"><a href="javascript:;">{{a3.label}}</a></li>
                    </ul>
                </li>
            </djkexpander>
        </djkaccordion>

js

.directive('djkaccordion',function(){
        return {
            restrict : 'EA',
            replace : true,
            transclude : true,
            template : '<ul class="menu-items" id="menu" ng-transclude></p>',
            controller : function() {
                var expanders = [];
                this.gotOpened = function(selectedExpander) {
                    angular.forEach(expanders, function(expander) {
                        if (selectedExpander != expander) {
                            expander.showMe = false;
                        }
                    });
                };
                this.addExpander = function(expander) {
                    expanders.push(expander);
                };
            }
        };
    })

js

.directive('djkexpander', function(){
        return {
            restrict : 'EA',
            replace : true,
            transclude : true,
            require : '^?djkaccordion',
            scope : {
                expanderTitle : '=',
                expanderIcon: '=',
                expanderUrl: '='
            },
            template: '<li>'
            + '<a href="javascript:;" class="menu-first" ui-sref="app.{{expanderUrl}}" ng-click="toggle()"  class="menu-first"><i class="ico-menu-{{expanderIcon}}"></i>{{expanderTitle}}</a>'
            + '<ul class="menu-second-wrap check-element animate-show" ng-show="showMe" ng-transclude></ul>'
            +'</li>',
            link : function(scope, iElement, iAttrs, accordionController) {
                scope.showMe = false;
                accordionController.addExpander(scope);
                scope.toggle = function toggle() {
                    scope.showMe = !scope.showMe;
                    accordionController.gotOpened(scope);
                };
            }
        };
    });

css

.menu-second-wrap{ display: block;transition: all linear 0.5s; margin: 0 0 0 35px; padding: 15px 0 12px; font-size: 12px; }

css的animate怎么写都无法达到理想的效果(和ui-Bootstrap中的手风琴效果一样.
求大神指导,拜谢