ng-Анимация: Как анимировать div?

Question

Я только что получил анимацию CSS с помощью ngAnimate. Классная вещь! Теперь я пытаюсь понять, как управлять анимацией элемента-брата, затронутого некоторой анимацией.

Plunker: https://plnkr.co/edit/XqpMPklO2SDlZQ1GIJ5Z?p=preview

Например, в приведенном выше plunker, верхний ДИВ одушевляет прочь красиво, но дно DIV не делает. Есть ли способ анимировать нижний div, когда верхний анимирован?

div.top { 
    width: 100%; 
    background-color: red; 
    height: 200px; 
    position: relative; 
    transition: 1s linear all; 
    opacity: 1; 
    top: 0; 
} 

div.bottom { 
    widows: 100%; 
    background-color: blue; 
    height: 300px; 
} 

button { 
    width: 100%; 
    padding: 25px; 
} 

div.top.ng-hide { 
    opacity: 0; 
    top: -1000px; 
} 

Answer 1

Проблема связана с внезапным исчезновением верхнего div. Сделайте переход к высоте: 0, а нижний div будет следовать за его движением.

div.top.ng-hide { 
    /* ... */ 
    height: 0; 
} 

Plnkr Fork