如何延迟转换直到前一个完成。 （吴秀）

Question

我有一系列 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 出现了。

我尝试在 .infoBlock class 上设置 transition-delay 但这并没有解决问题，我无法在设置 [=] 时使用 setTimeout() 15=] 因为它不会有任何效果，因为同一个变量控制着两个块的外观。

Answer 1

你可以玩ng-hide-animate和ng-hide-remove-active 类:

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

笨蛋：http://plnkr.co/edit/w0SIch3yIHuWldyonMLF