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

html

        
            
                

                    {{a2.label}}
                    

                        
{{a3.label}}
                    
                
            
        

js

.directive('djkaccordion',function(){
        return {
            restrict : 'EA',
            replace : true,
            transclude : true,
            template : '
',
            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: '
'
            + '{{expanderTitle}}'
            + '
'
            +'
',
            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中的手风琴效果一样.
求大神指导,拜谢