CSS 转换显示：none 正在反转

Question

我想问一些关于 CSS 过渡到 display: none 的事情。目前，我正在使用 impressivewebs https://www.impressivewebs.com/animate-display-block-none/ 的引用，但我反转了应该隐藏的 JavaScript ，但我展示了它。 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 class="container">
        <div class="tabs">
            <div class="tab">Tokyo</div>
            <div class="tab">Paris</div>
            <div class="tab">Washington</div>
            <div class="tab">Jakarta</div>
            <div class="tab">London</div>
        </div>
        <div class="content">
            <div class="content-item">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <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 class="content-item">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <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 class="content-item">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <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 class="content-item">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <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 class="content-item">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <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>

Answer 1

所以我已经阅读了您的参考资料并进行了更改。它说什么时候

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
        }

在 tabClick 中我们得到被点击的项目索引，最初所有 div 将是 hiddden,visuallyhidden 预计第一个 div（东京）。

当点击触发时，我们将获得 活动标签和活动内容。删除或隐藏以前活动的选项卡和内容.

现在在显示元素时，通过添加 content-active 使其显示 flex，然后通过删除 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 class="container">
        <div class="tabs">
            <div class="tab">Tokyo</div>
            <div class="tab">Paris</div>
            <div class="tab">Washington</div>
            <div class="tab">Jakarta</div>
            <div class="tab">London</div>
        </div>
        <div class="content">
            <div class="hidden visuallyhidden">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <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 class="hidden visuallyhidden">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <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 class="hidden visuallyhidden">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <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 class="hidden visuallyhidden">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <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 class="hidden visuallyhidden">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <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>

CSS 转换显示：none 正在反转

CSS transition display: none is getting reversed

javascript

css

css-transitions