What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

JS Tabs & buttons transition

shchdmitrii

New member
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
JavaScript:
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

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>
<script type="text/javascript">
 
</script>
CSS:
.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;
  /*
JavaScript:
//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
 
Back
Top