在頁面加載寬度CSS轉換

Question

我知道這可能不能沒有JavaScript，但我不介意使用它。

我有一個使用PHP獲取寬度百分比的div。

我需要做的是在頁面加載時，我希望條（Div）從0px寬度開始並過渡到正確的寬度百分比。

我可以做到罰款當然在懸停或活動狀態，但似乎無法得到正確的頁面加載。

Answer 1

你使用jQuery嗎？ Theres內置的文件準備功能。在裏面，添加一個類到div。然後在你的CSS，你可以樣式的div兩種不同的狀態，以適應過渡

javascipt的

$(function(){ 
    $('.bar').addClass('.ready'); 
}); 

CSS

.bar { 
    width: 0; 
    transition: width 500ms; 
} 
.bar.ready { 
    width: 100%; 
}