我想问一些关于CSS过渡到display: none的问题。目前，我正在使用的参考印象深刻的网站https://www.impressivewebs.com/animate-display-block-none/，但我扭转了JavaScript，它应该是隐藏的，但我显示了它。你可以在我的代码片段结果中看到它，所以当选项卡被点击时，它应该是活跃的，但随后它会淡出。
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>所以我已经阅读了您的参考资料并进行了更改。它说当
当元素不可见时，首先使其显示:block，然后(虽然它仍然在视觉上隐藏，但存在于页面上)，动画不透明度。
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(Tokyo)。
当点击触发时，我们将获得活动选项卡和活动内容。删除或隐藏以前活动的选项卡和内容.
现在在显示元素时，通过添加content-active使其显示柔性，然后通过删除visuallyhidden类添加过渡。
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>