如何延迟过渡，直到前一个完成。 (ng-显示)答案

【问题标题】：How to delay transition until previous one has completed. (ng-show)如何延迟过渡，直到前一个完成。 (ng-显示)
【发布时间】：2016-03-03 07:29:22
【问题描述】：

我有一系列 div 标签，其中包含有关特定部分的信息。一次只能看到一个 div 块，为了实现这一点，我有一个 ng-show 语句，它将条件基于当前设置的名称。我的标记看起来与此类似。

.infoBlock {
  transition: all .2s linear;
  width: 100%;
  height: auto;
}
.infoBlock.ng-hide {
  opacity: 0;
}

<div class="infoBlock" ng-show="selectedCategory == 'name1'">
  <p>
    ...some text
  </p>

</div>


<div class="infoBlock" ng-show="selectedCategory == 'name2'">
  <p>
    ...some text
  </p>

</div>

问题在于，由于 div 取代了先前显示的 div，即将显示的 div 出现在当前 div 有机会消失之前。

我尝试在.infoBlock 类上设置transition-delay，但这并没有解决问题，而且我无法在设置selectedCategory 时使用setTimeout()，因为它没有任何效果，因为相同的变量控制两个方块的外观。

【问题讨论】：

到目前为止你有什么？动画什么时候播出？可以添加控制器的相关部分吗？

标签： css angularjs css-animations ng-animate

【解决方案1】：

您可以使用ng-hide-animate 和ng-hide-remove-active 类玩把戏：

    .infoBlock.ng-hide-remove-active {
       transition-delay: 0.4s;
    }
    .infoBlock.ng-hide-animate {
       position:absolute;
    }

Plunker：http://plnkr.co/edit/w0SIch3yIHuWldyonMLF

【讨论】：

模型值变化的时候可以在这里加上transition-delay吗？ <div>{{mainCtrl.errorMsg}}</div>