在什么情况下删除CSS转换

我对Javascript很陌生，我正在尝试制作一个使用相同HTML文件的网页，它只是交叉淡入淡出内容，而不是重定向到新页面。我使用事件侦听器来知道当前页面何时淡出，从而触发新页面进入。为什么在下面的示例中，新页面不会缓慢淡出(它们只是突然出现，忽略了transition属性(？为什么内容不再响应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>

不能设置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; }
}

这是一个有趣的问题。

基本上，正如Mark所指出的，您无法设置它的动画，因为设置显示属性不可能设置动画，从而使其他过渡无效。

因此，只要您稍后可以在事件循环中更新可转换属性，它就会按预期工作。一个非常简单的方法是使用0时间的setTimeout。

function transitionEndCallback() {
oldPage.style["display"] = "none";
newPage.style["display"] = "block";
// add the setTimeout somewhere in this function        
setTimeout(() => {
page_1.style["opacity"] = "1";
}, 0)
on_page.removeEventListener('transitionend', transitionEndCallback);
}

通过这种方式，它在不同的事件循环回调中被调用，但之后仍然几乎立即更新。也许有一个更好的回调函数或功能，因为它有点古怪，但我可以验证它是否有效。

相关内容

最新更新

热门标签：