[英]Trigger CSS3 transition on page load
我正在尝试通过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;
}
它没有按预期工作。 我需要在页面加载时进行转换。
但是,当我检查元素并选中/取消选中跨度的width
时,就会得到效果。
如何对页面加载产生相同的影响?
使用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的小提琴: http : //jsfiddle.net/ySj7t/
通过从范围中删除类并在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>
元素中,或在加载页面时查看run函数
您可能希望使用jQuery(或其他框架)解决方案来确保跨浏览器的兼容性,但这会引入对框架的依赖性。 如果您已经包括jQuery,那就太好了。 如果不是,则需要先包含该库,然后使用:
jQuery的
$(window).load(function(){
$('.skill-bar span').addClass('w70');
});
右键单击输出框架,然后选择查看框架源以查看输出代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.