Change innerHtml text after css is finished?

Question

I have to tabs who change their size with css transition depending on which of them is selected, furthermore I want to change the innerHtml of them depending on whether they are selected or not: here the js code that changes tabs on click:

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";

So eg the tabs innerHtml changes from History to Workout History(last line above).

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;

   }

Now the css works fine also the innerHtml is change BUT the innerHtml changes to fast. Hence while the tabs size grows the text is already changed and too big for the tab leading to a 2nd line. Is it somehow possible to let the innerHtml wait until css transition is finish or how could I implement it?

Kind regards, Snafu

Answer 1

I solved it according to : Delay changing innerHTML text using jQuery .

Just by using setTimeout(), leading to a time delay before the innerHtml is changed.

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

Answer 2

W3C CSS TRANSITIONS

The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.

You can use like this:

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

• For webkit "webkitTransitionEnd"
• For mozilla "transitionend"
• For IE "MSTransitionEnd"
• For opera "oTransitionEnd" or "otransitionend" (first is for the native js, and second is for jQuery)