如何延迟转换，直到前一个完成。 （NG-显示）

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

</div>


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

</div>

＆＃13;

＆＃13;

＆＃13;

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

我尝试在transition-delay课程上设置.infoBlock，但这并没有解决问题，每当我设置setTimeout()时我就无法使用selectedCategory，因为它会因为同一个变量控制着两个块的外观，所以没有任何效果。

Answer 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