我的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
)
.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;
}