ng-show не справляется с ng-анимацией для уменьшения масштаба в выпадающем списке

Question

У меня есть раскрывающийся список, который я хочу, чтобы уменьшающая анимация отображалась, когда раскрывающееся меню открывается и закрывается. У меня есть CODEPEN here с кодом для вашего эксперимента.

Я замедлил его до 10-секундной анимации (а не конечной скорости, очевидно), чтобы вы могли видеть, что я имею в виду. Элементы уменьшаются с заданной скоростью (10 секунд), но элементы ниже не спускаются до завершения ng-анимации. Это вызывает перекрытие.

Это то, что я в моем 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>  

И КСС

.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); 
    } 
} 

Я по существу пытается воспроизвести ту же анимацию, как в угловом сайте материала видели here

п.с. любой другой подход или идея, которая не требует слишком больших изменений в целом, я открыт для нее. Я надеюсь на модификацию css, но я знаю, что это может быть не так просто. Я надеюсь, хотя :)

Спасибо за помощь.

Answer 1

UPDATE:

После Литт битных проб и ошибок я думаю, что я нашел SOLUTION. Если вы анимируете не div вокруг (sub-menu), ваш md-menu-item s, но сам элемент, он будет работать.

Я просто добавил 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.You может изменить высоту и добавить 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. Вы пишете это новое (возможно, не для вас, потому что вы не сильно измените). Я думаю, что есть определенно более простые решения, такие как ваш опубликованный пример. например см. HERE

Только стили отсутствуют и все работает.

Я тоже пытался изменить высоту на%, но это просто никогда не срабатывало. Даже добавьте некоторые 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, так что для полного отображения значения height значение должно быть дано submenu. Также используйте cubic-bezier для более плавного перехода.

Также я удалил директивы ng-animate="'animate'" на элементы, поскольку он не нужен, это старый способ добавления анимаций. Все классы теперь управляются директивой ng-show и нет директивы ng-animate. current ngAnimate docs может предоставить дополнительную информацию о классах.

Единственное, что было сделано, это переместить ng-show в div с классом submenu, что было просто лишним классом для <ul>.