Question

美好的一天！我正在尝试实现一个进度条，当单击一个按钮时，将填充一些数量。我发现这是一个非常有用的基础： http://css-tricks.com/css3-progress-bars/

增加条形码的方式是修改width:元素的span属性，这基本上是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>

Answer 1

我将-webkit-transition:all 0.5s;添加到.meter > span:after, .animate > span > span，似乎工作正常。 http://jsfiddle.net/VjHWr/

Answer 2

你试过

吗？

this.style.width = "35%";

重新触发动画

2 个答案: