页面加载时的宽度CSS转换

Question

我知道没有javascript可能无法做到这一点，但我不介意使用它。

我有一个div，它用PHP获取宽度百分比。

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

我当然可以在悬停或活动状态下做得很好，但在页面加载时似乎做不好。

Answer 1

您使用jQuery吗？有一个内置的文档准备功能。在其中，向div添加一个类。然后在CSS中，您可以为div的两种不同状态设置样式，以适应转换

Javascipt

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

CSS

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