ng-Animate：如何为兄弟 div 设置动画？答案

【问题标题】：ng-Animate: How to also animate sibling div?ng-Animate：如何为兄弟 div 设置动画？
【发布时间】：2016-04-29 12:23:07
【问题描述】：

我刚接触到 ngAnimate 的 CSS 动画。酷的东西！我现在正在努力弄清楚如何控制受某些动画影响的兄弟元素的动画。

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

例如，在上面的 plunker 中，顶部 div 动画效果很好，但底部 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;
}

【问题讨论】：

标签： angularjs css ng-animate

【解决方案1】：

问题与顶部 div 突然消失有关。使其过渡到 height: 0 并且底部 div 将跟随它的运动。

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

Plnkr Fork

【讨论】：

从height: 100%; 到height: 0 的动画似乎不起作用。有没有办法处理百分比转换？