页面加载时的宽度 CSS 过渡

【问题标题】：Width CSS Transition on Page Load页面加载时的宽度 CSS 过渡
【发布时间】：2013-11-27 10:28:53
【问题描述】：

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

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

我需要做的就是在页面加载时，我希望栏 ( Div ) 从 0px 宽度开始并过渡到正确的宽度百分比。

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

【问题讨论】：

【解决方案1】：

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

Javascipt

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

CSS

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

【讨论】：