美好的一天!我正在尝试实现一个进度条，当单击一个按钮时，该进度条将被填充一定数量。我发现这作为基础非常有用: http://css-tricks.com/css3-progress-bars/
增加条形填充量的方法是修改 span 元素的 width: 属性，这基本上是 1 行 javascript:
document.getElementById("this").style.width = "35%";
问题是虽然它可以工作，但不会触发填充动画。我在这里搜索有类似问题的人，我发现了这个:How do I re-trigger a WebKit CSS animation via JavaScript?
其中提供了一些我尝试在代码中实现的解决方案。它们似乎都不起作用，所以我决定创建一个新线程。完整源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tt1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<style>
.meter {
width:15%;
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
padding: 10px;
}
.meter > span {
display: block;
height: 100%;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
overflow: hidden;
}
.animate > span:after {
display: none;
}
@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.nostripes > span > span, .nostripes > span:after {
-webkit-animation: none;
background-image: none;
}
</style>
</head>
<body>
<div id="aa" class="meter">
<span id="this" style="width: 15%"></span>
</div>
<button onclick="asd()">asd</button>
</body>
</html>
<script>
function asd() {
document.getElementById("this").style.width = "35%";
document.getElementById("aa").style.animationName = "";
document.getElementById("aa").style.animationName = "move 2s";
document.getElementById("aa").style.webkitAnimationName = "";
document.getElementById("aa").style.webkitAnimation = "move 2s linear infinite";
}
//k
$(".meter > span").each(function () {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 1200);
});
</script>
最佳答案
我将 -webkit-transition:all 0.5s; 添加到 .meter > span:after, .animate > span > span 并且它似乎工作正常。
http://jsfiddle.net/VjHWr/
关于javascript - 重新触发动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17609456/