當從javascript中調用javascript時，CSS轉換不起作用

Question

我創建了一個模式窗口，當您單擊一個錨點時，它會淡入淡出。這樣做的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之前。

Answer 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>