JS Tabs & buttons transition

[shchdmitrii]

Hello!
I’m relatively new to js…
Here’re some js buttons with tabs…
Code https://codepen.io/shchdmitrii/pen/WNyEoVM

I’m currently figuring out how to make
!important transition from tabs__container_active to tabs__container…
Shortly I need that ‘tabs__container_active’ class removed after transition is completed …
Figured out that

container.classList.remove(activeContainerClass)

should "ran" only after the transition is complited
Could you please help me figure out how to implement this?…



Kind regards,
shchdmitrii

<div class="tab tabs">
      
    <!--buttons start-->    
      <div class="tab-nav tabs__tab-wrapper">
        
           <div class="nav tabs__tab" data-tab=0 id="nav-0">
            <label class="ctrl-label " for="tab-0-ctrl">0</label>
          </div>
                  <div class="nav tabs__tab" data-tab=1 id="nav-1">
            <label class="ctrl-label" for="tab-1-ctrl">1</label>
          </div>
  
        
          <div class="nav tabs__tab" data-tab=2 id="nav-2">
            <label class="ctrl-label" for="tab-2-ctrl">2</label>
          </div>
        
                  <div class="nav tabs__tab" data-tab=3 id="nav-3">
            <label class="ctrl-label" for="tab-3-ctrl">3</label>
          </div>
        <div class="nav tabs__tab" data-tab=4 id="nav-4">
            <label class="ctrl-label" for="tab-4-ctrl">4</label>
          </div>
        
      
        
       
       
              </div>
      <!--buttons end-->
    
 
      <div class="tab-container tabs__containers-wrapper">
        
     
 
      
          <div class="tab-container-block tabs__container" data-container=0 id="tab-0" >
              <h2>0</h2>
              <div class="head">
                  0
              </div>
          </div>

        <div class="tab-container-block tabs__container" data-container=1 id="tab-1" >
        <h2>1</h2>
                      <ul class="grid-view" data-grid="vertical">
                            
                            
                              <li class="cell">
                                <a>
                                  <div class="frame_block">
                                    <div class="label label-information">1</div>
                                     <div class="close-at">1</div>
                                                          <p>1</p>
                                  
                                  </div>
                                </a>
                              </li>
                            
                            
                          </ul>
                  </div>
     <div class="tab-container-block tabs__container" data-container=2 id="tab-2" >
        <h2>2</h2>
                      <ul class="grid-view" data-grid="vertical">
                            
                            
                              <li class="cell">
                                <a>
                                  <div class="frame_block">
                                    <div class="label label-campaign">2</div>
                                     <div class="close-at">2</div>
                                                          <p>2</p>
                                    <span class="arrow arrow-right"></span>
                                  </div>
                                </a>
                              </li>
                            
                            
                          </ul>
                  </div>
        <div class="tab-container-block tabs__container" data-container=3 id="tab-3">
                      <h2>3</h2>
                      <ul class="grid-view" data-grid="vertical">
                            
                              <li class="cell">
                  <a>
                    <div class="frame_block">
                      <div class="label label-information">3</div>
                      <div class="close-at"></div>
                      <p>3</p>
                      <span class="arrow arrow-right"></span>
                    </div>
                  </a>
                </li>
             
                          </ul>
                  </div>
           
       
           
 
                
                
                
      </div>
    
    
    </div>
<script type="text/javascript">
 
</script>

.tabs__container {
    visibility: hidden;
    opacity: 0;
 
        }
 
  /* for transition from tabs__container_active to tabs__container start  */
  /*
  .is-transitioning {
      display: block !important;
      visibility: visible !important;
     }
  /*
  /* for transition from tabs__container_active to tabs__container end */
      
        .tabs__container_active {
          display: block;
          visibility: visible;
          border-style: dashed;
          border-color: black;
          border-width: 4px; /*highlited with dashed border*/
          opacity: 1;
          transition: opacity 7s ease-in-out;
 
        
        }
        
        }
        .tabs__tab_active {
   
        }
      
        .tabs__tab-wrapper {
          display: flex;
        }
 
  .tab-nav > .nav {
  /*  border-image-source: url(placeholder_normal.png); */
      border-style: solid;
      border-color: black;
      border-image-slice: 24 fill;
      border-image-repeat: repeat;
      border-image-width: 12px;
      box-sizing: content-box;
    
  
  }
 
  .tab-container {
    visibility: hidden;
  }
  
  /*
  .tabs__container .tabs__container_active {
    position: absolute;
  }
  /*
  /*
  top: 49.414;
  bottom: 190.258 px;
  /*

//Tabs + buttons Logic start
function initTabs(tabsContainer) {
      const activeTabClass = 'tabs__tab_active'
      const activeContainerClass = 'tabs__container_active'
      const tabs = tabsContainer.querySelectorAll('.tabs__tab')
      const containers = tabsContainer.querySelectorAll('.tabs__container')
    
 
    
    
       function activateTab(identifier)  {
          let tabToActivate
          let containerToActivate
        
          tabs.forEach(tab => {
           
       
          tab.classList.remove(activeTabClass)
//tab.style.cssText -= 'border-image-source: url(placeholder_active.png)'; //button image changer - changes back image to placeholder_normal.png 
            tab.style.cssText -= 'border-color: red';
            tab.style.cssText += 'transition: 0.5s ease-in-out';
       if (tab.dataset.tab == identifier) {
                  tabToActivate = tab
              }
          })
          containers.forEach(container => {
  
//!important  "container.classList.remove(activeContainerClass)" should "ran" only after the transition is complited     
            container.classList.remove(activeContainerClass)
          
          
          
          
              if (container.dataset.container == identifier) {
                  containerToActivate = container
              }
          })
          tabToActivate.classList.add(activeTabClass)
//             tabToActivate.style.cssText += 'border-image-source: url(placeholder_active.png)';
        tabToActivate.style.cssText += 'border-color: red';
          tabToActivate.style.cssText += 'transition: 0.5s ease-in-out'; // active button image transition
          containerToActivate.classList.add(activeContainerClass)
      
      }
      activateTab(tabs[0].dataset.tab)
      tabs.forEach(tab => {
          tab.addEventListener('click', () => {
              activateTab(tab.dataset.tab)
          })
      })
  }
  initTabs(document.querySelectorAll('.tabs')[0])
  initTabs(document.querySelectorAll('.tabs')[1])
//Tabs + buttons Logic end