JS Tabs & buttons transition

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
transition from tabs__container_active to tabs__container…

Shortly for transition to work ‘tabs__container_active’ class should be 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

Code html


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

html end

css start



.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;
  /*

css end

JS start

//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

JS END

Didn’t really look at your code but there is a transitionend event.

Thanks for help !
Actually it was much easier to make transition form tabs_container_active to tabs_container… just added container.style.cssText += ‘transition: 2.5s ease-in-out’; near container.classList.remove(activeContainerClass) … :smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.