当类被从子元素调用的javascript更改时，CSS转换不起作用

CSS Transitions not working when class is changed by javascript called from child element

本文关键字：CSS 不起作用 转换 javascript 调用 元素      更新时间：2023-09-26

我创建了一个模式窗口，当您单击锚点时，该窗口会淡入淡出。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。

我不明白为什么你的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>

相关文章：