我创建了一个模式窗口,当您单击锚点时,该窗口会淡入淡出。用于此的HTML非常简单:
<div id="main_wrapper" class="displayed">
//Some content here
</div>
<div id="dynamic">
//Dynamically generated (AJAX) content here
//the below anchor skips the CSS transition somehow!
<a href='#' onclick='toggleDynamic(); return false;'>Cancel</a>
</div>
//This anchor works exactly as intended
<a href='#' onclick='toggleDynamic(); return false;'>Dynamic</a>
CSS稍微复杂一些,为简洁起见,我遗漏了一些属性:
.displayed{
opacity: 1 !important;
pointer-events: auto !important;
transition: opacity 1s ease-in .5s !important;
}
#main_wrapper{
max-width: 800px;
opacity: 0;
pointer-events: none;
transition: opacity 1s linear;
}
#dynamic{
position: fixed;
display: block;
opacity: 0;
pointer-events: none;
max-width: 800px;
transition: opacity 1s linear;
}
然后我只使用切换javascript函数:
function $I(id) {
return document.getElementById(id);
}
var dynamic = $I('dynamic');
var main = $I('main_wrapper');
function toggleDynamic() {
if(dynamic.className === "") {
dynamic.className = "displayed";
main.className = "";
} else {
dynamic.className = "";
main.className = "displayed";
}
}
以上所有代码完全按预期工作,除了一件事 - 当单击#dynamic内的锚点时,div消失而没有转换!我无法理解这一点,因为你可以整天点击外面的锚点并获得一个不错的渐变过渡。
据我所知(IE,FF,Chrome,Opera),所有浏览器都会出现这种情况。
编辑:我已经更改了javascript,因为之前没有正确处理className。
答案 0 :(得分:1)
我无法理解为什么你的JS会按原样工作,因为你没有修改你的#dynamic
类,只修改了一个变量(dynamic
)。对我来说,纠正后的片段就像魅力一样。
function $I(id) {
return document.getElementById(id);
}
var dynamic = $I('dynamic').className;
var main = $I('main_wrapper').className;
function toggleDynamic() {
if($I('dynamic').className === "") {
$I('dynamic').className = "displayed";
main = "";
} else {
$I('dynamic').className = "";
main = "displayed";
}
}
.displayed{
opacity: 1 !important;
pointer-events: auto !important;
transition: opacity 1s ease-in .5s !important;
}
#main_wrapper{
max-width: 800px;
opacity: 0;
pointer-events: none;
transition: opacity 1s linear;
}
#dynamic{
position: fixed;
display: block;
opacity: 0;
pointer-events: none;
max-width: 800px;
transition: opacity 1s linear;
}
<div id="main_wrapper" class="displayed">
//Some content here
</div>
<div id="dynamic">
//Dynamically generated (AJAX) content here
//the below anchor skips the CSS transition somehow!
<a href='#' onclick='toggleDynamic(); return false;'>Cancel</a>
</div>
//This anchor works exactly as intended
<a href='#' onclick='toggleDynamic(); return false;'>Dynamic</a>