在CSS完成后更改innerHtml文本？

Question

我必须选择根据CSS转换来更改其大小的选项卡，具体取决于是否选择了其中的选项，此外，我还想根据是否选择它们来更改它们的innerHtml：这是单击时更改选项卡的js代码：

var newTab = document.getElementById("newTab");
        newTab.className = "nav-tab-right nav-tab-notSelected";
        document.getElementById("tab-label-new").innerHTML = "New";
        var historyTab = document.getElementById("historyTab")
        historyTab.className = "nav-tab-left nav-tab-selected nav-tab-label-Selected";
        document.getElementById("tab-label-history").innerHTML = "Workout History";

因此，例如选项卡innerHtml从“历史记录”更改为“锻炼历史记录”（上面的最后一行）。

CSS：

.nav-tab-selected  {
width: 69%;
/*background: white;*/
background: rgba(255, 223, 139, 1);
transition: width 0.5s, background 0.5s;
  }


  .nav-tab-notSelected {
width: 30%;
background: white;
/*background: rgba(240, 239, 238, 0.59);*/
transition:width 0.5s, background 0.5s;

   }

现在，css也可以正常工作，而innerHtml也可以更改，但是innerHtml可以快速更改。 因此，随着制表符大小的增加，文本已经更改，并且对于制表符而言太大，导致第二行。 是否可以让innerHtml等到CSS转换完成还是我该如何实现？

亲切的问候，斯纳夫

Answer 1

我根据解决它： 延迟使用jQuery更改innerHTML文本 。

仅通过使用setTimeout（），就可以在更改innerHtml之前导致时间延迟。

timeout = setTimeout(function() {
            document.getElementById("tab-label-history").innerHTML = "Workout History";
            }, 110);

Answer 2

W3C CSS过渡

CSS Transition的完成将生成相应的DOM事件。 将为每个经历过渡的属性触发一个事件。 这允许内容开发人员执行与转换完成同步的动作。

您可以这样使用：

document.addEventListener("transitionend", function(){
    alert("Transition Ended");
});

• 对于webkit“ webkitTransitionEnd”
• 对于mozilla“ transitionend”
• 对于IE“ MSTransitionEnd”
• 对于歌剧“ oTransitionEnd”或“ otransitionend”（第一个用于本机js，第二个用于jQuery）