我在HTML頁面上有一個要給動態內容的元素，並且我希望插入的HTML從0％轉變爲100％不透明度。取消設置元素可見性，更改innerHTML和傳回

HTML

<div id="content"></div>

CSS

#content { 
    opacity: 1; 
    transition: opacity .5s ease-out; 
    -moz-transition: opacity .5s ease-out; 
    -webkit-transition: opacity .5s ease-out; 
} 

#content.hide { 
    opacity: 0; 
}

的JavaScript

function setContent(html) { 
    var content = document.getElementById("content"); 

    //Set hide class 
    content.className += " hide"; 

    //Set HTML 
    content.innerHTML = html; 

    //Unset hide class 
    content.className = content.className.replace(/(?:^|\s)hide(?!\S)/g, ''); 
}

注意setContent()集，然後會取消hide類。但是，似乎瀏覽器（Chrome至少）不會使內容元素無效，直到從函數返回後，元素纔會有機會進行轉換。我怎樣才能確保動畫的播放？

編輯：要明確的是，DOM被加載後是setContent()稱爲。想象一下，當某些操作發生時，應用程序會清除並重新填充屏幕。

來源

2013-10-19 Maarten

是這裏面'DOM ready'？ – Yang

什麼？ 'setContent'是一個全局函數。 – Maarten

這4行javascript運行速度在1ms以內，setTimeout怎麼樣？ –

使用動畫怎麼樣？

#content { 
    padding-left: 32px; 
    padding-right: 32px; 
    animation: fadein 0.5s; 
    -moz-animation: fadein 0.5s; 
    -webkit-animation: fadein 0.5s; 
} 

@keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-moz-keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-webkit-keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
}

來源

2013-10-19 14:29:48 Maarten

您能更清楚地瞭解這是什麼情況嗎？

另外你在哪裏調用函數？是否在DOM準備好函數中調用函數的地方？

在jQuery中它會是這樣的：

$(document).ready(function(){ 
    //call the function inside here. 
});

來源

2013-10-19 17:40:46 codeninja

該函數不會讓我的動畫起作用，而且我也不明白爲什麼我必須爲此使用JQuery。 – Maarten

取消設置元素可見性，更改innerHTML和傳回

HTML

CSS

的JavaScript

回答

相關問題