AngularJS ngAnimate Slidedown下拉菜单

Question

我创建了一个带菜单的左菜单，当我点击它打开的菜单时，但如果我点击它太快就关闭（当它打开时）它应该关闭顺利，但关闭是即时的，有时我get error TypeError：无法设置属性＆＃39; openProgress＆＃39;未定义的

    $scope.selectMenu = function(i,e)  {
    if ( i.submenu === true ) { e.preventDefault(); e.stopPropagation(); }
    var h = null,
        u = angular.element(angular.element(e.target).parent()[0].querySelector('ul'));

    if ( !u.hasClass('open') && u.hasClass('open-progress') ) {
        $animate.cancel(u[0].openProgress);
        $scope.closeMenu(u);
    }
    else if ( !u.hasClass('open') && !u.hasClass('open-progress') ) {
        $scope.openMenu(u);
    }
    else if ( u.hasClass('open') && !u.hasClass('close-progress') ) {
        $scope.closeMenu(u);   
    }
    else if ( u.hasClass('open') && u.hasClass('close-progress') ) {
        $animate.cancel(u[0].closeProgress);
        $scope.closeMenu(u);   
    }        
} 
$scope.openMenu = function(e) {
    e.addClass('open-progress');
    e.css('display', 'block');
    var h = e.height();
    e.css('height', '0px');

    e[0].openProgress = $animate.animate(e, {height: '0px'}, {height: h + 'px'});
    e[0].openProgress.then(function(){
        e.removeClass('open-progress'); 
        e.addClass('open');
        e.removeAttr('style');
    });        
}
$scope.closeMenu = function(e) {
    e.addClass('close-progress');
    var h = e.height();

    e[0].closeProgress = $animate.animate(e, {height: h + 'px'}, {height: '0px'});
    e[0].closeProgress.then(function(){
        e.removeClass('close-progress'); 
        e.removeClass('open');
        e.removeAttr('style');
    });        
}

如果HTML可以帮助您..

<ul class="side-bar ng-scope" ng-controller="leftbar-menu"><!-- ngRepeat: i in leftmenus --><li ng-repeat="i in leftmenus" ng-class="{active: isPage('/') &amp;&amp; i.submenu === false}" class="ng-scope"><a href="/" ng-click="selectMenu(i,$event)"><i class="fa fa-home"></i><span class="ng-binding">Dashboard</span></a><!--<ul class="dd-leftmenu" ng-if="i.submenu === true" ng-show="i.submenuOpen === true">--><!-- ngIf: i.submenu === true --></li><!-- end ngRepeat: i in leftmenus --><li ng-repeat="i in leftmenus" ng-class="{active: isPage('/') &amp;&amp; i.submenu === false}" class="ng-scope"><a href="/" ng-click="selectMenu(i,$event)" class=""><i class="fa fa-cog"></i><span class="ng-binding">Test</span></a><!--<ul class="dd-leftmenu" ng-if="i.submenu === true" ng-show="i.submenuOpen === true">--><!-- ngIf: i.submenu === true --><ul class="dd-leftmenu ng-scope" ng-if="i.submenu === true"><!-- ngRepeat: si in i.menus --><li ng-repeat="si in i.menus" class="ng-scope"><a href="/" ng-click="selectMenu(si,$event)" class="ng-binding">Test 1</a><!-- ngIf: si.submenu === true --><ul class="dd-leftmenu ng-scope open" ng-if="si.submenu === true"><!-- ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 1
                    </li><!-- end ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 2
                    </li><!-- end ngRepeat: ssi in si.menus --></ul><!-- end ngIf: si.submenu === true --></li><!-- end ngRepeat: si in i.menus --><li ng-repeat="si in i.menus" class="ng-scope"><a href="/" ng-click="selectMenu(si,$event)" class="ng-binding">Test 1</a><!-- ngIf: si.submenu === true --><ul class="dd-leftmenu ng-scope" ng-if="si.submenu === true"><!-- ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 1
                    </li><!-- end ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 2
                    </li><!-- end ngRepeat: ssi in si.menus --></ul><!-- end ngIf: si.submenu === true --></li><!-- end ngRepeat: si in i.menus --><li ng-repeat="si in i.menus" class="ng-scope"><a href="/" ng-click="selectMenu(si,$event)" class="ng-binding">Test 1</a><!-- ngIf: si.submenu === true --><ul class="dd-leftmenu ng-scope" ng-if="si.submenu === true"><!-- ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 1
                    </li><!-- end ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 2
                    </li><!-- end ngRepeat: ssi in si.menus --></ul><!-- end ngIf: si.submenu === true --></li><!-- end ngRepeat: si in i.menus --><li ng-repeat="si in i.menus" class="ng-scope"><a href="/" ng-click="selectMenu(si,$event)" class="ng-binding">Test 1</a><!-- ngIf: si.submenu === true --><ul class="dd-leftmenu ng-scope" ng-if="si.submenu === true"><!-- ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 1
                    </li><!-- end ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 2
                    </li><!-- end ngRepeat: ssi in si.menus --></ul><!-- end ngIf: si.submenu === true --></li><!-- end ngRepeat: si in i.menus --><li ng-repeat="si in i.menus" class="ng-scope"><a href="/" ng-click="selectMenu(si,$event)" class="ng-binding">Test 1</a><!-- ngIf: si.submenu === true --><ul class="dd-leftmenu ng-scope" ng-if="si.submenu === true"><!-- ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 1
                    </li><!-- end ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 2
                    </li><!-- end ngRepeat: ssi in si.menus --></ul><!-- end ngIf: si.submenu === true --></li><!-- end ngRepeat: si in i.menus --><li ng-repeat="si in i.menus" class="ng-scope"><a href="/test" ng-click="selectMenu(si,$event)" class="ng-binding">Test 2</a><!-- ngIf: si.submenu === true --></li><!-- end ngRepeat: si in i.menus --></ul><!-- end ngIf: i.submenu === true --></li><!-- end ngRepeat: i in leftmenus --><li ng-repeat="i in leftmenus" ng-class="{active: isPage('/') &amp;&amp; i.submenu === false}" class="ng-scope"><a href="/" ng-click="selectMenu(i,$event)"><i class="fa fa-cog"></i><span class="ng-binding">Test</span></a><!--<ul class="dd-leftmenu" ng-if="i.submenu === true" ng-show="i.submenuOpen === true">--><!-- ngIf: i.submenu === true --><ul class="dd-leftmenu ng-scope" ng-if="i.submenu === true"><!-- ngRepeat: si in i.menus --><li ng-repeat="si in i.menus" class="ng-scope"><a href="/" ng-click="selectMenu(si,$event)" class="ng-binding">Test 1</a><!-- ngIf: si.submenu === true --><ul class="dd-leftmenu ng-scope" ng-if="si.submenu === true"><!-- ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 1
                    </li><!-- end ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 2
                    </li><!-- end ngRepeat: ssi in si.menus --></ul><!-- end ngIf: si.submenu === true --></li><!-- end ngRepeat: si in i.menus --><li ng-repeat="si in i.menus" class="ng-scope"><a href="/" ng-click="selectMenu(si,$event)" class="ng-binding">Test 1</a><!-- ngIf: si.submenu === true --><ul class="dd-leftmenu ng-scope" ng-if="si.submenu === true"><!-- ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 1
                    </li><!-- end ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 2
                    </li><!-- end ngRepeat: ssi in si.menus --></ul><!-- end ngIf: si.submenu === true --></li><!-- end ngRepeat: si in i.menus --><li ng-repeat="si in i.menus" class="ng-scope"><a href="/" ng-click="selectMenu(si,$event)" class="ng-binding">Test 1</a><!-- ngIf: si.submenu === true --><ul class="dd-leftmenu ng-scope" ng-if="si.submenu === true"><!-- ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 1
                    </li><!-- end ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 2
                    </li><!-- end ngRepeat: ssi in si.menus --></ul><!-- end ngIf: si.submenu === true --></li><!-- end ngRepeat: si in i.menus --><li ng-repeat="si in i.menus" class="ng-scope"><a href="/" ng-click="selectMenu(si,$event)" class="ng-binding">Test 1</a><!-- ngIf: si.submenu === true --><ul class="dd-leftmenu ng-scope" ng-if="si.submenu === true"><!-- ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 1
                    </li><!-- end ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 2
                    </li><!-- end ngRepeat: ssi in si.menus --></ul><!-- end ngIf: si.submenu === true --></li><!-- end ngRepeat: si in i.menus --><li ng-repeat="si in i.menus" class="ng-scope"><a href="/" ng-click="selectMenu(si,$event)" class="ng-binding">Test 1</a><!-- ngIf: si.submenu === true --><ul class="dd-leftmenu ng-scope" ng-if="si.submenu === true"><!-- ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 1
                    </li><!-- end ngRepeat: ssi in si.menus --><li ng-repeat="ssi in si.menus" class="ng-binding ng-scope">
                        Test 1 2
                    </li><!-- end ngRepeat: ssi in si.menus --></ul><!-- end ngIf: si.submenu === true --></li><!-- end ngRepeat: si in i.menus --><li ng-repeat="si in i.menus" class="ng-scope"><a href="/test" ng-click="selectMenu(si,$event)" class="ng-binding">Test 2</a><!-- ngIf: si.submenu === true --></li><!-- end ngRepeat: si in i.menus --></ul><!-- end ngIf: i.submenu === true --></li><!-- end ngRepeat: i in leftmenus --></ul>