在页面加载时触发CSS3过渡效果

Question

我正在尝试通过CSS3宽度过渡来实现页面加载时的加载效果。 这里是演示。

HTML

<div class="skill-bar">
    <span class="w70"></span>
</div>

CSS

.skill-bar {
    width: 57%;
    float: left;
    height: 11px;
    border-radius: 5px;
    position: relative;
    margin: 6px 0 12px 0;
    border: 2px solid #00edc2;
}
.skill-bar span {
    background: #00edc2;
    height: 7px;
    border-radius: 5px;
    display: inline-block;
}
.skill-bar span.w70 {
    width: 70%;
}
.skill-bar span {
    width: 0;
    transition: width 1s ease;
    -webkit-transition: width 1s ease;
    background-color: #00edc2;
}

功能不如预期。我需要在页面加载时发生过渡效果。

但是当我检查元素并选中/取消选中 Span 的 width 时，我能看到这种效果。

如何在页面加载时实现相同的效果？

- Ajey

---

CSS过渡效果适用于属性的变化。如果您想在加载时进行转换，则需要在页面加载时更改某些内容。这可以通过JavaScript轻松完成，但我不知道是否有其他方法可以实现。 - Zhihao

@Zhihao，请问你能告诉我如何使用JS完成吗？ - Ajey

你可以使用CSS来设置初始宽度的样式。使用JS，在页面加载时运行一个函数，将宽度更改为所需的最终宽度。CSS过渡将处理两个宽度状态之间的动画，因此您只需要担心使用JS更改宽度即可。 - Zhihao

你能帮我看看我的代码吗？我好像在某个地方出了问题。:( - Ajey

请看这里：http://jsfiddle.net/ySj7t/ - MatTheCat

Answer 1

您可以使用CSS动画实现这种效果，而无需使用JavaScript并避免任何兼容性问题：

<div class="skill-bar">
    <span class="w70"></span>
</div>

---

.skill-bar {
    width: 57%;
    float: left;
    height: 11px;
    border-radius: 5px;
    position: relative;
    margin: 6px 0 12px 0;
    border: 2px solid #00edc2;
}
.skill-bar span {
    background: #00edc2;
    height: 7px;
    border-radius: 5px;
    display: inline-block;
}
.skill-bar span {
    animation: w70 1s ease forwards;
}
.skill-bar .w70 {
    width: 70%;
}
@keyframes w70 {
    from { width: 0%; }
    to { width: 70%; }
}

Webkit的Fiddle地址：http://jsfiddle.net/ySj7t/

- MatTheCat

---

使用动画的方法更加优美。 - andyb

如果你想延迟动画，animation-delay 似乎不起作用。相反，修改你的 @keyframes，例如 @keyframes w70 { 0% { width:0%;} 50% {width: 0%;} 100% {width:70%;}} 这将意味着动画将被延迟 0.5 秒（你动画持续时间的 50%）。 - Jamie Chong

此外，当宽度未知或以其他方式设置时，您可以对“max-width”进行动画处理。 - random_user_name

Answer 2

通过JavaScript添加类：

$(".skill-bar span").addClass("w70");

See fiddle here.

- lante

Answer 3

通过从中移除class，并在JavaScript中设置它，浏览器将应用转换，但这仅适用于第一个.skill-bar。另外.getElementsByClassName在IE8或以下版本不起作用。 HTML

<div class="skill-bar"><span></span></div>

JavaScript

document.getElementsByClassName('skill-bar')[0].getElementsByTagName('span')[0].className = 'w70';

（所以只需在 HTML 后面包装这个 <script> 元素，或者查看页面加载时运行函数）

Pure JavaScript demo

您可能希望使用 jQuery（或其他框架）解决方案以确保跨浏览器兼容性，但这会引入对该框架的依赖。如果您已经包含了 jQuery，则很好。如果没有，则需要先包含该库，然后使用：

jQuery

$(window).load(function(){
    $('.skill-bar span').addClass('w70');
});

jQuery演示

右键单击输出框并选择查看框架源代码以查看输出代码。

- andyb