ng-Animate：如何讓兄弟div動畫？

Question

我剛剛用ngAnimate進入CSS動畫。很酷的東西！我現在正在努力想出如何控制受某些動畫影響的同胞元素的動畫。

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