CSS转换导致函数

Question

我的AngularJS App中有一个面板，带有动态标题，具体取决于用户点击的列表中的哪个项目。如果用户点击标有Green的列表项，则绿色会显示在标题中，如下所示：

<p>{{$ctrl.colourPhaseTitle.title}} Phase</p> // DYNAMIC TITLE

<li class="bg-phase-green pill-tabs" ng-init="$ctrl.colourKey(0);" ng-click="activeTab = 0; $ctrl.colourKey(0);" ng-hide="activeTab == 0">Green</li>
<li class="bg-phase-amber pill-tabs" ng-click="activeTab = 1; $ctrl.colourKey(1)" ng-hide="activeTab == 1">Amber</li>

//activeTab with the `ng-click` along with `ng-hide/ng-show` is what hides/show li elements

colourKey是控制器中的一个功能，它显示标题和描述等特定信息，activeTab是用户点击它时隐藏li项的内容

它有效/有效。在添加:hover转换之前，li项的显示和隐藏顺利进行。现在，.2s等属性会发生background转换，li项会闪烁，而不是立即交换。

问题

如何在执行要交换的项目的函数（show/hide）

之前等待CSS转换结束

.notification-tabs .pill-tabs {
    -webkit-transition: background .2s ease-in-out, border .2s ease-in-out, color .2s ease-in-out;
    -o-transition: background .2s ease-in-out, border .2s ease-in-out, color .2s ease-in-out;
    transition: background .2s ease-in-out, border .2s ease-in-out, color .2s ease-in-out;
}