良い一日！ボタンがクリックされると、ある程度の量が満たされるプログレスバーを実装しようとしています。これはベースとして非常に役立つことがわかりました： http://css-tricks.com/css3-progress-bars/
バーがファイルされる量を増やす方法はwidth:、要素のプロパティを変更することspanです。これは基本的に 1 行の JavaScript です。
document.getElementById("this").style.width = "35%";
問題は、機能しますが、塗りつぶしアニメーションがトリガーされないことです。ここで同様の問題を抱えている人を検索したところ、次のことがわかりました。JavaScript を介して WebKit CSS アニメーションを再トリガーするにはどうすればよいですか
これは、コードに実装しようとしたいくつかのソリューションを提供しました。どれもうまくいかないようなので、新しいスレッドを作成することにしました。ソースコード全体は次のとおりです。
<!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>