页面加载的宽度CSS转换

Question

我知道如果没有javascript可能无法完成，但我不介意使用它。

我有一个用PHP抓住宽度百分比的div。

我需要做的就是在页面加载时我希望条形图（Div）以0px宽度开始并转换为正确的宽度百分比。

我当然可以在Hover或Active状态下做得很好，但似乎无法正确处理页面加载。

Answer 1

你使用jQuery吗？这是一个内置的文档就绪功能。在其中，向div添加一个类。然后在CSS中，您可以设置div的两种不同状态，以适应过渡

javascipt的

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

CSS

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