Ng-show does not support working with ng-animation for scaling in the drop-down menu

Question

I have a drop-down list that I want the zoom animation to display when the drop-down list opens and closes. I have CODEPEN here with experiment code.

I slowed it down to 10 second animation (and not final speed), just for you to understand what I mean. Elements are reduced at a given speed (10 seconds), but the elements below do not go down until the completion of the ng animation. This causes an overlap.

This is what I have in my HTML

<div class="cnt">
    <md-list ng-click="menuIsOpen = 1" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
        <span class="title flex" flex=""> Menu Item</span>
        <i class="fa fa-chevron-down"></i>
    </md-list>
    <div class="sub-menu" ng-show="menuIsOpen===1" ng-animate="'animate'" >
        <md-menu-item ng-repeat="item in data"  >
            <md-button>
                <div layout="row" flex="">
                    <a ui-sref="{{item.link}}">
                        <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                    </a>
                </div>
            </md-button>
        </md-menu-item>
    </div>

    <md-list ng-click="menuIsOpen = 2" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
        <span class="title flex" flex=""> Menu Item 2</span>
        <i class="fa fa-chevron-down"></i>
    </md-list>
    <div class="sub-menu" ng-show="menuIsOpen===2" ng-animate="'animate'" >
        <md-menu-item ng-repeat="item in data">
            <md-button>
                <div layout="row" flex="">
                    <a ui-sref="{{item.link}}">
                        <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                    </a>
                </div>
            </md-button>
        </md-menu-item>
    </div>
</div>      

And CSS

.ng-hide-remove {
    -webkit-animation:2s scaleIn ease;
    animation:2s scaleIn ease;
}

@-webkit-keyframes scaleIn {
    From {
        transform-origin:  top;
        -webkit-transform: scaleY(0);
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -o-transform: scaleY(0);
        transform: scaleY(0);
    }
    To {
        transform-origin:  top;
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes scaleIn {
    From {
            transform-origin:  top;
          -webkit-transform: scaleY(0);
          -moz-transform: scaleY(0);
          -ms-transform: scaleY(0);
          -o-transform: scaleY(0);
          transform: scaleY(0);
    }
        To {
          transform-origin:  top;
          -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }
}

I am essentially trying to reproduce the same animation as on the angular website that was seen here

p.s. , , . css, , . , :)

.

Answer 1

UPDATE:

, SOLUTION. div (sub-menu) md-menu-item, , .

ng-if="menuIsOpen===1" md-menu-item ( ng-show="menuIsOpen===1 sub-menu) :

md-menu-item.ng-enter{
    -webkit-animation:3s move ease;
    animation:3s move ease;
}

@-webkit-keyframes move {
    From {
        margin-bottom:-50px;
    }
    To {
        margin-bottom:0px;
    }
}


@keyframes move {
    From {
        margin-bottom:-50px;
    }
    To {
        margin-bottom:0px;
    }
}

. margin-bottom, height .

---

, . ( , .) , , , . .

1. transform-origin: top;, :

    @keyframes scaleIn {
  From {
     transform-origin:  top;
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    height: 0px;
  }
  To {
     transform-origin:  top;
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
    height: 190px;
  }
}

transform-origin , . , .

2. (, , ). , , . .

, .

%, . div , . , , - .

Answer 2

, , , .

Edited Codepen

CSS, . , () (). .

, , :

.sub-menu{
    background: #333;
    max-height: 500px;
    position: relative;
    display: block;
    overflow:hidden;
}
.sub-menu.ng-hide{
max-height: 0;
}

.sub-menu.ng-hide-remove {
    transition: max-height 700ms cubic-bezier(0.35, 0, 0.25, 1);
}

.sub-menu.ng-hide-add {
    transition: max-height 600ms cubic-bezier(0.35, 0, 0.25, 1);
}

transisiton. max-height, height, submenu height submenu. cubic-bezier .

ng-animate="'animate'" , , . ng-show, ng-animate. ngAnimate .

- ng-show div submenu, <ul>.