我對 Javascript 還很陌生，我正在嘗試制作一個使用相同 HTML 檔案的網頁，并且只是淡入淡出內容而不是重定向到新頁面。我正在使用事件偵聽器來了解當前頁面何時淡出并觸發新頁面進入。 為什么在下面的示例中，新頁面不會緩慢淡入（它們只是突然出現，忽略過渡屬性）？為什么內容不再回應 CSS 轉換？
編輯：我會盡力澄清我在這里問的問題。我知道該display功能無法轉換，這實際上就是我完全使用事件偵聽器的原因。我試圖做到這一點，當一頁的內容淡出時，下一頁在同一個地方淡入，我相信這是無法實作的visibility。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<!-- CSS -->
<style>
/* navagation bar style */
#navbar {
overflow: hidden;
background-color: #000000;
text-align: center;
width: 100%;
height: 36px;
}
#navbar a {
display: inline-block;
color: #ffffff;
padding: 10px 15px 10px 15px;
font-size: 16px;
}
/* content style*/
.page {
padding: 50px;
text-align: center;
transition: opacity 1s;
}
</style>
<!-- Javascript -->
<script>
window.onload = function() {setup()};
function setup() {
var page1link = document.getElementById("page1link");
var page1 = document.getElementById("page1");
page1.style["opacity"] = "1";
var page2link = document.getElementById("page2link");
var page2 = document.getElementById("page2");
page2.style["opacity"] = "0";
page2.style["display"] = "none";
var page3link = document.getElementById("page3link");
var page3 = document.getElementById("page3");
page3.style["opacity"] = "0";
page3.style["display"] = "none";
page1link.onclick = function() {fade(page1, page2, page3)};
page2link.onclick = function() {fade(page2, page1, page3)};
page3link.onclick = function() {fade(page3, page1, page2)};
}
function fade(page_1, page_2, page_3) {
let on_page;
if (page_2.style["opacity"] != "0") {
on_page = page_2
} else if (page_3.style["opacity"] != "0") {
on_page = page_3
} if (on_page != undefined) {
on_page.addEventListener('transitionend', fadePageIn)
on_page.style["opacity"] = "0";
function fadePageIn() {
on_page.style["display"] = "none";
page_1.style["display"] = "";
page_1.style["opacity"] = "1";
on_page.removeEventListener('transitionend', fadePageIn);
}
}
}
</script>
<title>Example</title>
</head>
<body>
<div id="navbar">
<a id="page1link" href="javascript:void(0)">Page 1</a>
<a id="page2link" href="javascript:void(0)">Page 2</a>
<a id="page3link" href="javascript:void(0)">Page 3</a>
</div>
<div class="page" id="page1">
page 1 content here
</div>
<div class="page" id="page2">
page 2 content here
</div>
<div class="page" id="page3">
page 3 content here
</div>
</body>
</html>uj5u.com熱心網友回復：
您無法為該display屬性設定影片。因此，當您同時設定opacity和display時，opacity將轉換但display值會立即更改。
作為替代方案，該visibility屬性可以是影片的。它的值之間的插值發生在中間點，所以如果你想讓它作業，transition這可能會使事情復雜化。但是我已經在使用CSS影片，以改變過去的成功opacity和visibility在同一時間。使用這樣的影片：
@keyframes becomeVisible {
0% { visibility: visible; }
100% { visibility: visible; }
}
@keyframes becomeHidden {
0% { visibility: visible; }
100% { visibility: visible; }
100% { visibility: hidden; }
}
@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeout {
0% { opacity: 1; }
100% { opacity: 0; }
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/354877.html
標籤：javascript html css