CSS transition display: none is getting reversed-CodePudding

I want to ask something about CSS transition to display: none. Currently, I'm using the reference of impressivewebs https://www.impressivewebs.com/animate-display-block-none/ , but I reversed the JavaScript which it should be hidden, but I showed it. You can see it in my snippet result, so when the tab is clicked and should be active but then it fades out.

var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
  if(window.angular) return;
  document.querySelectorAll('.tab:first-child').forEach( first => {
    first.classList.add('active');
  })
  document.querySelectorAll('.content-item:first-child').forEach( first => {
    first.classList.add('active');
  })
})
window.addEventListener('DOMContentLoaded', ()=> {
  let tabs = document.querySelectorAll('.tab');
  let content = document.querySelectorAll('.content-item');
        for (let i = 0; i < tabs.length; i  ) {            
            tabs[i].addEventListener('click', () => tabClick(i));
        }

        function tabClick(currentTab) {
            removeActive();
            tabs[currentTab].classList.add('active');
            content[currentTab].classList.add('active');
            setTimeout(function () {                          //Added
              content[currentTab].classList.add('show');      //Added
            }, 50);                                           //Added
            iframe = content[currentTab].querySelector('iframe');
            iframe.setAttribute('src', iframe.getAttribute('data-src'));
        }

        function removeActive() {
            for (let i = 0; i < tabs.length; i  ) {
                tabs[i].classList.remove('active');
                content[i].classList.remove('show');                      //Changed
                content[i].addEventListener('transitionend',function(e) { //Added
                  content[i].classList.remove('active');                  //Changed & Added
                });
                iframe = content[i].querySelector('iframe');
                iframe.removeAttribute('src');
            }
        }
})

.container {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: top;
            align-items: center;
            flex-direction: column;
        }

        .tabs {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .tab {
            font-size: 16px;
            padding: 5px 15px;
            cursor: pointer;
        }

        .tab.active {
            background-color: rgb(250, 97, 9);
        }

        .content {
            width: 100vw;
            margin-top: 50px;
            height: 100vh;
        }

        .content-item {
            display: none;
            padding: 0px;
            border: none;
        }

        .content-item.active {
            display: flex;
            border: none;
            justify-content: center;
            height: 100%;
            transition: 2.5s ease-in-out all;
        }

        .show {
            opacity: 0;
        }

        .content-iframe {
            border: none;
            padding: 0px;
            margin: 0px;
            width: 100vw;
            height: 50vh;
        }

<div >
        <div >
            <div >Tokyo</div>
            <div >Paris</div>
            <div >Washington</div>
            <div >Jakarta</div>
            <div >London</div>
        </div>
        <div >
            <div >
              <div >
                <div >
                  <div >
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
            <div >
              <div >
                <div >
                  <div >
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
            <div >
              <div >
                <div >
                  <div >
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
            <div >
              <div >
                <div >
                  <div >
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
            <div >
              <div >
                <div >
                  <div >
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/London" src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
        </div>
    </div>

CodePudding user response：

so i have read your reference and made changes. it says when

When the element is invisible, first make it display: block, then (while it’s still visually hidden, but existing on the page), animate the opacity.

function tabClick(currentTab) {
            let prevt = document.querySelectorAll('.tab-active')[0];
            let prevc = document.querySelectorAll('.content-active')[0];
            prevc.classList.remove('content-active');
            prevc.classList.add('visuallyhidden');
            prevt.classList.remove('tab-active');
            
        
            tabs[currentTab].classList.add('tab-active');
            content[currentTab].classList.add('content-active');
            setTimeout(function () {                          //Added
              content[currentTab].classList.remove('visuallyhidden');      //Added
            }, 50);                                           //Added
        }

in tabClick we get the clicked item index, initially all div will be hiddden,visuallyhidden expect first div(Tokyo).

when click trigger we will get active tab, and active content. remove or hide previously active tab and content.

now at time of showing element, make it display flex by adding content-active and than add transition by removing visuallyhidden class.

var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
  if(window.angular) return;
  document.querySelectorAll('.tab:first-child').forEach( first => {
    first.classList.add('tab-active');
  })
  document.querySelectorAll('.hidden:first-child').forEach( first => {
    
    first.classList.remove('visuallyhidden');
    first.classList.add('content-active');
  })
})
window.addEventListener('DOMContentLoaded', ()=> {
  let tabs = document.querySelectorAll('.tab');
  let content = document.querySelectorAll('.hidden');
        for (let i = 0; i < tabs.length; i  ) {            
            tabs[i].addEventListener('click', () => tabClick(i));
        }

        function tabClick(currentTab) {
            let prevt = document.querySelectorAll('.tab-active')[0];
            let prevc = document.querySelectorAll('.content-active')[0];
            prevc.classList.remove('content-active');
            prevc.classList.add('visuallyhidden');
            prevt.classList.remove('tab-active');
            
        
            tabs[currentTab].classList.add('tab-active');
            content[currentTab].classList.add('content-active');
            setTimeout(function () {                          //Added
              content[currentTab].classList.remove('visuallyhidden');      //Added
            }, 50);                                           //Added
        }
})

 .container {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: top;
            align-items: center;
            flex-direction: column;
        }

        .tabs {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .tab {
            font-size: 16px;
            padding: 5px 15px;
            cursor: pointer;
        }

        .tab-active {
            background-color: rgb(250, 97, 9);
        }

        .content {
            width: 100vw;
            margin-top: 50px;
            height: 100vh;
        }

        .hidden {
            display: none;
            padding: 0px;
            border: none;
        }

        .content-active {
            display: flex;
            border: none;
            justify-content: center;
            height: 100%;
            transition: 2.5s ease-in-out all;
        }

        .visuallyhidden {
            opacity: 0;
        }

        .content-iframe {
            border: none;
            padding: 0px;
            margin: 0px;
            width: 100vw;
            height: 50vh;
        }

<div >
        <div >
            <div >Tokyo</div>
            <div >Paris</div>
            <div >Washington</div>
            <div >Jakarta</div>
            <div >London</div>
        </div>
        <div >
            <div >
              <div >
                <div >
                  <div >
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
            <div >
              <div >
                <div >
                  <div >
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
            <div >
              <div >
                <div >
                  <div >
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
            <div >
              <div >
                <div >
                  <div >
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
            <div >
              <div >
                <div >
                  <div >
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/London" src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
        </div>
    </div>