重新触发动画

Retriggering an animation

本文关键字：动画新触发更新时间：2023-09-26

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

增加栏的归档量的方法是修改span元素的width:属性，该属性基本上是javascript:的1行

  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>

我在.meter > span:after, .animate > span > span中添加了-webkit-transition:all 0.5s;，它似乎运行良好。http://jsfiddle.net/VjHWr/

你试过吗

this.style.width = "35%";